vue中简单的组件传值

对上一篇TodoList做了改进，在点击li后删除该选项
涉及到vue中父子组件传值

todolist演示.gif

<div id="app">
        <div>
            <input type="text" v-model="inputValue">
            <button @click="btnClick">提交</button>
            <ul>
                <!-- list中每多一个item 就会多显示todo-item的组件 -->
                <!-- 父组件和子组件通信 -->
                <!-- 表示在循环list时，获得的每一个item都绑定到content中 -->
                <!-- 监听到delete事件时 触发父组件中handleItemDelete方法 -->
                <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete">
                </todo-item>
            </ul>
        </div>
    </div>
    <script>
        // 2.vue创建局部组件 配合注册
        var TodoItem = {
            // 父组件向子组件传值 通过props接收
            props: ['content', 'index'],
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function() {
                    // 子组件向父组件传值 
                    //使用emit向外触发delete事件 带着index参数
                    this.$emit("delete", this.index);
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            // 将组件注册到实例中 原来叫TodoItem，在实例里还是叫TodoItem
            components: {
                TodoItem: TodoItem
            },
            methods: {
                btnClick: function() {
                    this.list.push(this.inputValue);
                    this.inputValue = " ";
                },
                handleItemDelete: function(index) {
                    // 删除list中对应index的值
                    this.list.splice(index, 1);
                }
            }
        });
    </script>

父子组件通信方式

父->子：
循环遍历list，得到的每个item和index都通过v-bind绑定到content属性和index属性中。

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

在子组件中通过props接收传递的content和index属性。

var TodoItem = {
            // 父组件向子组件传值 通过props接收
            props: ['content', 'index'],
            ....

在list改变时，通过父组件向子组件传值，显示<li>标签。

子->父
删除点击后的<li>，此时需要子组件告诉父组件index是多少，方便父组件更改list列表。
例如，点击<li>apple</li>后apple将被删除，在li中绑定handleItemClick函数，在子组件的methods中声明，使用this.$emit("delete",this.index)向外触发delete事件，同事携带index参数。
同时组件监听到delete事件时，触发父组件中handleItemDelete方法

todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete">

需要在父组件中声明handleItemDelete方法

handleItemDelete: function(index) {
      // 删除list中对应index的值
      this.list.splice(index, 1);
 }

总结

在父组件向子组件传值时，需要使用v-bind绑定属性，子组件通过props接收。
在子组件向父组件传值时，需要使用this.emit()向外触发事件，监听到事件后触发父组件的方法。（监听是桥梁）