[Vuejs]-Vue passing data to child component

7👍

According to the Component props doc, you can pass data to child component like this :

<child name="value"></child>

and

<child :name="value"></child>

for dynamic props

So, in your template, when you loop over items array, you got item object. Just pass it to your child component

<demo-list-item v-for="item in items" :item="item">

Also, in your child component, you have to tell that you attempt to get a prop named item

var DemoListItem = Vue.extend({
    template : '#demo-list-item-template',
    props: ['item']
});

You can validate props, set default value, etc (see doc)

Now, in your child template, you have access to item property

<li data-id="{{item.id}}">{{ item.name }}</li>

Leave a comment