1. 父组件传子组件 props

步骤：
1.子组件在props中创建一个属性，用来接受父组件传来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性，把需要传给子组件的值赋给该属性

    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handleBtn">提交</button>
        <ul>
            <todo-item :content="item"  v-for="item in list">
            </todo-item>
        </ul>
    </div>

    <script type="text/javascript">
        var TodoItem = {
            props:["content"],
            template:"<li>{{content}}</li>",
        }
        var vm = new Vue({
            el:'#app',
            data:{
                list:[],
                inputValue:"",
            },
            //局部组件
            components:{
                TodoItem:TodoItem
            },
            methods:{
                handleBtn(){
                    this.list.push(this.inputValue);
                    this.inputValue = "";
                }
            }
        })
    </script>

2. 子组件给父组件传值 $emit

步骤：
1.子组件需要触发一个自定义事件，将需要传的值作为$emit的第二个参数，将该值作为实参传给响应自定义事件的方法
2.父组件中注册子组件的同时，在子组件的标签上自定义对事件的监听

    <div id="app">
        <ul>
            <todo-item
                v-for="(item,index) in list"
                :content="item"
                :index="index"
                @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>

    <script type="text/javascript">
        var TodoItem = {
            props:["content","index"],
            template:"<li @click='handleItem'>{{content}}</li>",
            methods:{
                handleItem(){
                    this.$emit("delete",this.index)
                }
            }
        }
        var vm = new Vue({
            el:'#app',
            data:{
                list:["aa","bb","cc"],
            },
            //局部组件
            components:{
                TodoItem:TodoItem
            },
            methods:{
                handleItemDelete(index){
                    console.log(index);
                    this.list.splice(index,1);
                }
            }
        })
    </script>