---
title: "Passing data into components in Knockout"  
description: "Passing data into components in Knockout"  
author: "Ravi Vishwakarma"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34053/passing-data-into-components-in-knockout  
category: "knockcout js"  
tags: ["knockout.js", "knockout.js template", "knockout.js data-binding", "knockout.js components"]  
reading_time: 4 minutes  

---

# Passing data into components in Knockout

You can create **components** (kind of like **reusable UI** modules) and pass data into them using the `params` binding — similar to how you'd pass props in frameworks like `React`or `Vue`.

Let’s go step-by-step and learn how to create and use components with data-binding support.

## What Are Knockout Components?

1. Reusable templates + ViewModels
2. Encapsulate functionality
3. Accept input via `params`

## Basic Example: A `hello-user` component

### Register the Component

```javascript
ko.components.register('hello-user', {
  viewModel: function(params) {
    this.name = ko.observable(params.name); // passed from parent
  },
  template: `<div>Hello, <strong data-bind="text: name"></strong>!</div>`
});
```

### Use It in HTML

```html
<hello-user params="name: userName"></hello-user>
```

### Parent ViewModel

```javascript
function AppViewModel() {
  this.userName = ko.observable("Alice");
}

ko.applyBindings(new AppViewModel());
```

Now it’ll show: **Hello, Alice!**

## `params` — How It Works

You can pass **any data** into the component:

1. Primitive values
2. Observables
3. Objects
4. Functions

## Example:

```html
<my-card params="title: 'Product', price: 99.99, inStock: true"></my-card>
```

## Working with Multiple Params

```javascript
ko.components.register('my-card', {
  viewModel: function(params) {
    this.title = params.title;
    this.price = params.price;
    this.inStock = params.inStock;
  },
  template: `
    <div>
      <h3 data-bind="text: title"></h3>
      <p>Price: $<span data-bind="text: price"></span></p>
      <span data-bind="visible: inStock">In stock</span>
      <span data-bind="visible: !inStock()">Out of stock</span>
    </div>
  `
});
```

## Bonus: Passing Observable vs. Value

1. If you pass an **observable**, the component will react to changes.
2. If you pass a **plain value**, it's fixed at that time.

## Example:

```html
<hello-user params="name: userName"></hello-user>
```

If `userName` is observable and gets updated, the component will automatically reflect the change.

#### Summary

| Feature | Description |
| --- | --- |
| `ko.components.register` | Defines the component |
| `params` | Used to pass data from parent to component |
| `template` | Inline or external HTML |
| Reactive props | Use observables for dynamic updates |

## Answers

### Answer by Ravi Vishwakarma

You can create **components** (kind of like **reusable UI** modules) and pass data into them using the `params` binding — similar to how you'd pass props in frameworks like `React`or `Vue`.

Let’s go step-by-step and learn how to create and use components with data-binding support.

## What Are Knockout Components?

1. Reusable templates + ViewModels
2. Encapsulate functionality
3. Accept input via `params`

## Basic Example: A `hello-user` component

### Register the Component

```javascript
ko.components.register('hello-user', {
  viewModel: function(params) {
    this.name = ko.observable(params.name); // passed from parent
  },
  template: `<div>Hello, <strong data-bind="text: name"></strong>!</div>`
});
```

### Use It in HTML

```html
<hello-user params="name: userName"></hello-user>
```

### Parent ViewModel

```javascript
function AppViewModel() {
  this.userName = ko.observable("Alice");
}

ko.applyBindings(new AppViewModel());
```

Now it’ll show: **Hello, Alice!**

## `params` — How It Works

You can pass **any data** into the component:

1. Primitive values
2. Observables
3. Objects
4. Functions

## Example:

```html
<my-card params="title: 'Product', price: 99.99, inStock: true"></my-card>
```

## Working with Multiple Params

```javascript
ko.components.register('my-card', {
  viewModel: function(params) {
    this.title = params.title;
    this.price = params.price;
    this.inStock = params.inStock;
  },
  template: `
    <div>
      <h3 data-bind="text: title"></h3>
      <p>Price: $<span data-bind="text: price"></span></p>
      <span data-bind="visible: inStock">In stock</span>
      <span data-bind="visible: !inStock()">Out of stock</span>
    </div>
  `
});
```

## Bonus: Passing Observable vs. Value

1. If you pass an **observable**, the component will react to changes.
2. If you pass a **plain value**, it's fixed at that time.

## Example:

```html
<hello-user params="name: userName"></hello-user>
```

If `userName` is observable and gets updated, the component will automatically reflect the change.

#### Summary

| Feature | Description |
| --- | --- |
| `ko.components.register` | Defines the component |
| `params` | Used to pass data from parent to component |
| `template` | Inline or external HTML |
| Reactive props | Use observables for dynamic updates |


---

Original Source: https://www.mindstick.com/interview/34053/passing-data-into-components-in-knockout

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.