Vue 给子组件传递参数
- 首先看个例子吧
html
<div class="container" id="app">
<div class="row">
<div class="col-sm-12">
<h3>My Components</h3>
<todo-item :todos="todos01"></todo-item>
</div>
</div>
</div>
<script type="x-template" id="component-todo">
<ul class="list-group" v-if="todos && todos.length > 0">
<li class="list-group-item" v-for="todo in todos" :class="{special: !todo.isSpecial}">
{{todo.title}}
<button class="btn btn-xs pull-right" :class="{'btn-success': todo.isSpecial,'btn-danger': !todo.isSpecial }" @click="changeActive(todo)">
{{todo.isSpecial ? 'DONE' : 'What?'}}
</button>
</li>
</ul>
<div v-else>
<p>There isn't any todo</p>
</div>
</script>
js
var todoItem = Vue.extend({
template: '#component-todo',
props: ['todos'],
methods: {
changeActive(todo) {
todo.isSpecial = !todo.isSpecial;
}
}
})
Vue.component('todo-item', todoItem);
new Vue({
el: '#app',
data: {
todos: [{
id: 1,
title: 'zgo to shoping',
isSpecial: false
}, {
id: 2,
title: 'jump for sport',
isSpecial: true
}, {
id: 3,
title: 'welcome vueJs',
isSpecial: true
}],
todos01: [{
id: 1,
title: 'so so crazy',
isSpecial: true
}, {
id: 2,
title: 'i v ini',
isSpecial: false
}, {
id: 3,
title: 'nothing is there',
isSpecial: true
}]
}
})