vue自定义组件事件,vue 事件传递

　　本文主要介绍Vue的自定义事件内容分发，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

　　1.小伙伴们，这个理解起来有点复杂。希望你能认真看完原理自己敲：

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　标题标题/标题

　　/头

　　身体

　　div id=应用程序

　　待办事项

　　西安槽=西安:标题=标题/西安

　　//建议从后面往前看，就是把遍历得到的值赋给v-bind，把v-bind的值赋给同名props的值。

　　//[提醒]v-on:绑定的自定义事件名称会自动变成小写。如果某人的事件名称是大写的，下面这个。$emit还是大写的，所以不会绑定。

　　yu slot=yu v-for=(item，index) in items

　　v绑定：item=item v绑定：index=index

　　v-on:remove= delete items(index)/Yu

　　Vue实例将数据和方法绑定到视图层，视图层将这些数据和方法分发给下面的组件进行绑定。视图相当于将VUE实例的数据和方法转移到组件的控件中。

　　/todo

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script

　　脚本

　　Vue.component(todo ，{

　　模板：“div\

　　插槽名称=xian/slot\

　　ul\

　　slot name=yu/slot\

　　/ul\

　　/div

　　});

　　Vue.component(xian ，{

　　道具：[title]，

　　模板：“div{{title}}/div”

　　});

　　Vue.component(yu ，{//props是参数名，类似于变量名，可以随便定义。v-bind绑定变量、数据和定义的变量。

　　道具：[item ， index]，

　　//只能绑定当前组件的方法

　　模板： Li { { index } }-{ { item } } button @ click= remove delete/button/Li ，

　　方法：{

　　移除：函数(索引){

　　//这个。$发出自定义事件分发

　　//【注意】这个。$emit(事件名称)此事件名称应使用kebab-case(短横线命名)而不是camelCased(驼峰型)；

　　这个。$emit(remove ，index)；

　　}

　　}

　　});

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　标题：“作者”，

　　条目：[咸鱼翻身1 ，咸鱼翻身2 ，咸鱼翻身3]

　　},

　　方法：{

　　deleteItems:函数(索引){

　　Console.log(您删除了 this . items[index])；

　　this.items.splice(索引，1)；

　　}

　　}

　　});

　　/脚本

　　/body

　　/html

　　运行结果：

　　当我们点击删除，我们可以删除任何作者的名字。在这里，我点击删除第二个，结果如下：

　　2.下面有张图让大家看懂：

　　理解是组件和实例之间的方法不能互调，要删除的节点属于实例的属性，所以通过事件分发把组件中定义的方法转到实例中定义的方法，然后删除节点。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。