vue 实现任意组件之间的通信

一、全局事件总线

1、创建Vue实例时在Vue原型上绑定vue实例 Vue实例或VueComponent实例中拥有 $on、$once、$emit 而且开发过程中有且只有一个vue实例不需要额外声明vm 或 vc实例

new Vue({el: '#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this //将自身绑定到Vue原型作为全局总线}
})

2、使用时只需要在全局总线中声明绑定事件即可

sendStudentName(){this.$bus.$emit('hello',666) //声明自定义组件
}

mounted(){this.$bus.$on('hello',(data)=>{  //绑定自定义事件到全局总线console.log(this)console.log('我是组件，收到了数据',data)})
},
beforeDestroy() {   this.$bus.$off('hello')//销毁自定义事件 注意要指定事件名称 不指定会销毁所有自定义事件 而所有组件使用的是同一个总线
}

二、消息订阅与发布

安装第三方消息订阅发布库

例如安装pubsub.js 执行** npm i pubsub-js **命令

mounted(){this.pubId = pubsub.subscribe('hello', (msgname,data)=>{    //订阅消息 第一个参数为消息名称 第二个是回调函数 回调函数中第一个参数为消息名称 第二个参数为获取的数据console.log(this)console.log('有人发布了hello消息，hello消息的回调执行了',msgname,data)})
},
beforeDestroy() {pubsub.unsubscribe(this.pubId())   //通过消息订阅Id取消订阅
}

sendStudentName(){pubsub.publish('hello',666)  //发布消息 第一个参数为消息名称 第二个参数为消息所带数据
}

消息订阅发布与事件总线很相似

vue 实现任意组件之间的通信相关推荐

Vue组件通信:任意组件之间进行通信
之前一篇博客,我们介绍了子组件向父组件通信的方法,可以参考博客: 深度理解Vue组件的子组件向父组件传递数据的通信方式,全面详细,看这一篇就够了,推荐收藏_czjl6886的博客-CSDN博客今天, ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
【Vue】父子组件之间的通信
情景父组件有一个 btnList 数组,里面存放着按钮的名称和按钮的id,现在要把这个数组传入到子组件中进行渲染. 子组件渲染出按钮后,点击按钮,父组件的 h1 标签中会显示出当前点击的按钮是哪一个 ...
React（一）父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分.备注一下基础要点. 1.父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件 .父组件代码 i ...
第十节：实现vue组件之间的通信
这一节我们还是来继续介绍组件:组件之间如何通信. 第九节我们在介绍组件知识的时候,提到过组件可以接受参数props,这其实就是组件之间的一种通信方式:父组件→子组件传递数据. 父组件→子组件那我们还 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
[vue] vue组件之间的通信都有哪些？
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...

vue 实现任意组件之间的通信

一、全局事件总线

1、创建Vue实例时在Vue原型上绑定vue实例 Vue实例或VueComponent实例中拥有 $on、$once、$emit 而且开发过程中有且只有一个vue实例不需要额外声明vm 或 vc实例

2、使用时只需要在全局总线中声明绑定事件即可

二、消息订阅与发布

安装第三方消息订阅发布库

消息订阅发布与事件总线很相似

vue 实现任意组件之间的通信相关推荐

最新文章

热门文章

vue 实现任意组件之间的通信

一、全局事件总线

1、创建Vue实例时在Vue原型上绑定vue实例 Vue实例或VueComponent实例中拥有 $on、$once、$emit 而且开发过程中有且只有一个vue实例 不需要额外声明vm 或 vc实例

2、使用时只需要在全局总线中声明绑定事件即可

二、消息订阅与发布

安装第三方消息订阅发布库

消息订阅发布 与 事件总线很相似

vue 实现任意组件之间的通信相关推荐

最新文章

热门文章

1、创建Vue实例时在Vue原型上绑定vue实例 Vue实例或VueComponent实例中拥有 $on、$once、$emit 而且开发过程中有且只有一个vue实例不需要额外声明vm 或 vc实例

消息订阅发布与事件总线很相似