java1234开源博客系统
博客信息

自定义事件实现父子组件交互

发布时间:『 2019-07-17 14:10』  博客类别:Vue.js  阅读(2844) 评论(0)

自定义事件实现父子组件交互


前面我们父组件通过传递方法对象,来实现子组件调用父组件,我们也可以通过自定义事件来实现;


主要通过:this.$emit('myEvent')


我们修改下前面的案例:

QQ鎴浘20190717122633.jpg


@addMenu="addMenu"  绑定事件;


因为我们去掉了 传值,所以Menu.vue子组件里 

prop里去掉

QQ鎴浘20190717122752.jpg


以及this.addMenu已经不好调用了。


QQ鎴浘20190717122903.jpg

this.$emit('addMenu',menu)


我们要改成 this.$emit('addMenu',menu) 触发事件,效果一样;


还有一种方式,通过代码动态绑定自定义事件


改下

QQ鎴浘20190717140720.jpg

标签组件搞个ref引用;


QQ鎴浘20190717140743.jpg

mounted 当页面挂载完毕后,绑定下监听,也一样的效果 。就是繁琐点;




关键字:   vue     自定义  
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运,技术改变世界)
Powered by Java1234 V3.0 Copyright © 2012-2016 Java知识分享网 版权所有