Vue自定义事件$emit()详解
在组件绑定数据后，我们如果想实现一个点击删除按钮就删除这个数据的功能，那么我们需要删除vue中的数据。如何实现？vue实例和vue组件互不相干，组件和组件之间的操作可以用插槽，组件如何调用Vue实例中的方法？
数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除
Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit(‘自定义事件名’, 参数)，操作过程如下:
demo
myDefineThing.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script src="/npm/vue@2.6.14/dist/vue.js"></script><!--view层 模版--><!--定义一个事件用v-on --><div id="app"><todo><todo-title slot="todo-title" v-bind:mytitle="title"></todo-title><todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:myitem="item"v-bind:index="index" v-on:myremove="removeItems(index)"></todo-items></todo></div><script>ponent("todo",{template:'<div>\<slot name="todo-title"></slot>\<ul>\<slot name="todo-items"></slot>\</ul>\</div>'});ponent("todo-title",{props:['mytitle'],template: '<div>{{mytitle}}</div>'});ponent("todo-items",{props:['myitem','index'],template:'<li>{{index}}----{{myitem}} <button @click="remove">删除</button></li> ',methods:{remove:function (index){//this.$emit 自定义事件分发this.$emit('myremove',index);}}})var vm=new Vue({el:"#app",data:{title:"冷丁",todoItems:['JAVA','C++','Go']},methods: {removeItems:function (index){console.log("删除了"+this.todoItems[index]+"ok");this.todoItems.splice(index,1);}}});</script></body></html>
测试：
实现了点击按钮后可以删除对应数据的功能
说明
javascript 语法splice
this.todoItms.splice(index,1); 第二个参数代表删除几个元素，这样写就是删除下标为index的元素
this.todoItms.splice(index,2)；代表删除下标从index开始的两个元素
this.todoItms.splice(index,2，‘hello’)代表删除下标从index开始的两个元素,并且追加一个hello元素
通过加入下标index的方式，可以遍历出数据的下标
对整个过程的理解
首先有前端、组件、vue实例。
前端可以直接调用vue中的方法，组件和前端也可以绑定(通过slot插槽)，想删除的对象在vue中，需要在组件中定义一个函数，删除vue中的对象。组件不能直接调用到vue实例里面的东西。
vue是双向绑定，组件通过this.$emit()可以绑定前端的自定义事件。
前端的v-on可以调用vue中的方法
