2.3简单的组件传值

<div id="app">


    <input type="text" v-model="inputValue">
    <button v-on:click="handleBtnClick">提交</button>
    <ul>
        <!--
         1.@delete="handleItemDelete"  给子元素绑定事件
         2.父组件向子组件传值通过 v-bind传递
         3.子组件向父组件传值，子组件通过 this.$emit 方法向父组件发送事件，通过事件传递数据
       -->
        <todo-item :content="item"
                    v-bind:index="index"
                   v-for="(item,index) in list"
                   @delete="handleItemDelete"
        >


        </todo-item>
    </ul>
</div>

<script>

    var TodoItem = {
        props: ['content','index'],
        template: "<li @click='handleItemClick'>{{content}}</li>",
        methods:{
            handleItemClick:function () {
                this.$emit("delete",this.index)  // 发射一个自定义事件

            }
        }
    }

    var app = new Vue({
        el: '#app',
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            handleBtnClick: function () {
                if (!this.inputValue == '') {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
            handleItemDelete:function (index) {
                this.list.splice(index,1)
            }
        }
    })

</script>