十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍“Vue中如何实现非父子组件通信”,在日常操作中,相信很多人在Vue中如何实现非父子组件通信问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue中如何实现非父子组件通信”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
目前成都创新互联已为近1000家的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、镇雄网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句
具体如何去实现却没有很详细的说明,于是自己试着进行了实现。先看下简单的通信效果:
就是点击了一个组件,另一个组件的数字递加。
html如下:
再来看一下如何实现每一个组件:
var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转 Vue.component('component-a',{ template: ``, //添加点击事件incrementB ,因为点击A需要增加B data () { return { masgA : 0 } }, methods: { incrementB: function () { //增加B的事件 bus.$emit('incrementB') //中转站bus 触发incrementB事件 } }, mounted: function () { var _this = this bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA,这个事件最终由组件B进行触发 _this.masgA ++ }) //bus.$on('incrementA',()=>{ //这里也可以用箭头函数,就不会有_this这个变量了,因为箭头函数不会改变this指向 // this.masgA ++ //}) } })
从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的,同理代component-b也是一样
Vue.component('component-b',{ template: ``, data () { return { masgB : 0 } }, methods: { incrementA: function () { bus.$emit('incrementA') } }, mounted: function(){ bus.$on('incrementB',() => { this.masgB ++ }) } })
完整代码如下,可直接复制运行
非父子组件通信
同时也可以看出这么做仅有两个组件就有些麻烦,事件的流向不是很清晰,所以在出现复杂的场景时需要使用VueX进行管理。
到此,关于“Vue中如何实现非父子组件通信”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!