[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)

核心：

在vue原型中挂载vue实例
通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数
在生命周期函数mounted中，通过this.bus.$on('传递出来的事件名, callback')来做后续逻辑处理

Demo(实现点击，使得另外一个也改变成自己的名字)

<div id="app"><child content="吴旭飞"></child><child content="左晶晶"></child>
</div>
<script>Vue.prototype.bus = new Vue() // 在vue原型中挂载vue实例Vue.component('child', {data () {return {selfcontent: this.content}},props: {content: {type: String,}},template: '<div @click="handleClick">{{selfcontent}}</div>',methods: {handleClick () {this.bus.$emit('change', this.selfcontent) // 通过this.bus.$emit('事件名', '参数')向外触发事件和传递参数}},mounted() { // 3. 在生命周期函数mounted中，通过this.bus.$on('传递出来的事件名, callback')来做后续逻辑处理this.bus.$on('change', data => {this.selfcontent = data})},})var app = new Vue ({el: '#app'})
</script>
复制代码

转载于:https://juejin.im/post/5cd0284cf265da03a85ad4b9

[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)相关推荐

Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
VUE非父子组件通信Bus——公交车踩坑笔记
抛开父子组件的通讯,对于非父子组件通信,简单的数据交互,使用Bus是非常不错的. 遇到的坑有两个. 1.两个组件的信息交互代码写在哪个生命周期函数中,如果只是点击组件A标签触发函数,然后向界面B传递参 ...
关于Vue非父子组件传值
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
Vue非父子组件传值+案例cnode首页
1. 创建公共实例化对象 const bus=new Vue() 2. 在需要发送数据的组件中绑定事件使用 bus.$emit发送数据 <button @click="send&q ...
VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
vue中非父子组件传值
vue中非父子组件传值我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法使用bus ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...

[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)

[Vue]非父子组件传值(bus/总线/观察者模式/发布订阅模式)相关推荐

最新文章

热门文章