自定义内容分发

如何在slot组件插槽的基础上实现数据操作

因为组件与Vue实例传递数据是通过v-bind和props，当前组件可以绑定当前组件中的事件，但是不能直接绑定到vue实例中的事件，但是要操作vue中的data必须要通过Vue实例中的方法删除，通过自定义事件就能调用到绑定的事件，就可以绑定到Vue实例的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
    <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:removeDefined="removeItems(index)" :key="index"></todo-items>
    </todo>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">javascript"></script>

<script >javascript">
    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: "<p>{{title}}</p>"
    });
    Vue.component("todo-items",{
        props:["item","index"],
        /*@是v-on的简写 */
        template: "<li>{{index}}------{{item}}<button @click='remove'>删除</button></li>",
        methods:{
            remove: function (index) {
                /*这里绑定的事件还得是全小写*/
                /*所以自定义事件的时候干脆写成小写就行*/
                this.$emit("removedefined", index);
            }
        }
    });
    var vm = new Vue({
        el:'#vue',
        data:{
            title:"haoyun",
            todoItems:["spring","springMVC","mybatis"],
        },
        methods:{
            removeItems:function (index) {
                console.log("删除了"+this.todoItems[index]+"ok");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>