Vue 給子組件傳遞參數

Vue 給子組件傳遞參數

1. 首先看個例子吧

原文

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
        }]
    }
})

 

<todo-item :todos="todos01"></todo-item>

todos是組件中通過props傳遞過來的參數，todos01是組件上一層定義的

可以嘗試將todos01換成todos看看效果