Vue的自定义分发事件

自定义事件内容分发

v-bind给组件绑定参数，简写**😗*

v-on 绑定事件，简写**@**

v-model 数据双向绑定

组件内部绑定事件需要使用到this.$emit(‘事件名’,参数);

<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
    //slot:插槽
    Vue.component("todo",{
        template:
            '<div>' +
                '<slot name="todo-title"></slot>' +
                '<ul>'+
                    '<slot name="todo-items"></slot>'+
                '</ul>' +
            '</div>'
    });

    Vue.component("todo-title",{
        props:['title'],
       template: "<div>{{title}}</div>"
    });

    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template:'<li>{{index}}----{{item}}<button v-on:click="remove">删除</button></li>',
        methods:{
            remove:function (index){
                // this.$emit
                this.$emit('remove',index);
            }
        }
    });

    var vm=new Vue({
        el:"#app",
        data:{
            title:"列表",
            todoItems:['lzj','hh','wxl']
        },
        methods: {
            removeItems:function (index){
                console.log("删除了"+this.todoItems[index]+"ok")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>