<div id="root">
    <!--模板-->
    <input v-model="inputValue" type="text" autofocus=true />
    <button @click="handleSubmit">提交</button>
    <ul>
        <!--子组件-->
       <todo-item v-for="(item,index) of list"
                  :key="index"
                  :content="item"
                  :index="index"
                  @delete="handleDelete"
               >
       </todo-item>
    </ul>
</div>
<script>
//    每一个组件都是一个实例
//    Vue.component注册或获取全局组件
    Vue.component('todo-item',{
//        props 可以是数组或对象，用于接收来自父组件的数据
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}{{index}}</li>',
        methods:{
            handleClick:function(){
//                $emit触发当前实例上的事件。附加参数都会传给监听器回调。
                this.$emit('delete',this.index)
            }
        }
    })
//    var TodoItem={
//        template:'<li>item</li>'
//    }
//实例
    new Vue({
//        挂载点
        el:"#root",
        data:{
            inputValue:"",
            list:[]
        },
        methods:{
            handleSubmit:function(){
                this.list.push(this.inputValue)
                this.inputValue=""
            },
            handleDelete:function(index){
                this.list.splice(index,1)
            }
        }
    })
</script>