Vue 给子组件传递参数

Posted 2020-08-26

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看看效果