vue父子通信

首先在组件创建中创建子组件Todos.vue

<template>
    <div class="hello">
        <h1>todos show</h1>
        <ul class="list-group">
            <li class="list-group-item"
                v-bind:class="{'complete':todo.completed}"
                v-for="(todo,index) in todos">
                {{todo.title}}
                <button class="btn btn-warning pull-right"
                        v-on:click="deleteTodo(index)">
                    delete
                </button>
                <button class="btn btn-warning pull-right"
                        v-bind:class="[todo.completed ? 'btn-danger' :'btn-success']"
                        v-on:click="toggleCommpletion(todo)">
                    {{todo.completed?'undo':'todo'}}
                </button>
            </li>
        </ul>
    </div>
</template>
<style>
    .completed {
        color: darkgreen;
    }
</style>
<script>
    export default {
        props: ['todos'],
        methods: {
            deleteTodo(index){
                this.todos.splice(index, 1)
            },
            toggleCommpletion(todo){
                todo.completed = !todo.completed
            }
        }
    }
</script>

要注意的是要告诉子组件有一个todos属性，就在组件中定义props属性值；

再根组件中引入子组件

import Todos from './components/Todos'

根组件中定义组件是要绑定组件属性即：：todos=“todos”

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <hello></hello>
        <todos :todos="todos"></todos>
        </div>
</template>

<script>
    import Hello from './components/Hello'
    import Todos from  "./components/Todos"
    import TodoFrom from  "./components/TodoFrom"

    export default {
        name: 'app',
        data(){
            return {
                todos:[
                    {id:1,title:'learn vue',completed:false,}
                ]
            }
        },
        computed:{
            todoCount(){
                return this.todos.length;
            }
        },
        components:{
            Todos,Hello,TodoFrom
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

需要注意是：data属性要定义成方法进行返回,这样子组件才能接受到