vue学习18：非父子组件间的传值（bus/总线/发布订阅者模式/观擦者模式）

最新推荐文章于 2022-03-15 10:45:22 发布
最新推荐文章于 2022-03-15 10:45:22 发布
阅读量827 收藏 1
点赞数
分类专栏： web前端 vue学习心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40814356/article/details/80225468
版权


这里我比较疑惑的是为什么点击的时候，会console.log两次

这是因为点击的时候。这个组件的方法被触发，因为上面的两个组件都是这个子组件，都会执行这个方法。console的是当前点击的content。

所以第一个child和第二个child 都会执行该方法，console出来点击的组件的content。

simoonQian
关注
专栏目录
vue：非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 167
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head>...
Vue组件通信（非父子通信之Bus）
Dreamer_xr的博客
07-18 1582
我的上一篇关于vue组件通信的文章链接戳这里 => vue组件通信，点击传值，动态传值（父传子，子传父） 今天要说的是非父子通信方式，这种跨组件的通信方式，可以通过Bus的形式进行处理。在Vue 2.x 推荐使用 个空的 Vue 实例作为中央 件总线（ bus ），也就是 相当于一个中介。 比如你需要租房子 你可能会找房产中介来登记你的需求 然后中介把你的信息发给满足要求的出租者...
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改父组件的值 return { copyConten
Vue非父子组件传值
qq_49867247的博客
03-15 4123
Vue非父子组件传值： 事件总线 $attrs / listeners
vue 非父子组件传值
fighting_sunnyGirl的博客
03-05 551
页面A &lt;template&gt; &lt;div class="hello"&gt; &lt;h1 @click="store"&gt;{{ msg }}&lt;/h1&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { name: 'myHel
vue基础：非父子组件传值
谷咕咕
01-22 681
vue基础：非父子组件传值 本文共用到四个文件： 根组件：App.vue 两个子组件：Home.vue,News.vue js文件：eveemit.js 文章最后有所有文件 步骤： 1.新建一个js文件，引入vue并实例化，最后暴露这个实例 vueemit.js文件 import Vue from 'vue' var vueevent =new Vue() export default vue...
04 非父子组件传值
bin_2659017380的博客
05-27 285
一、非父子组件传值 要点： 1、需要在全局vue的实例的原型上挂在一个新的vue实例 2、挂载完之后，就可以让所有的组件通过原型上的vue实例实现一个连接的桥梁 具体实现 1、发送数据者 使用原型上的vue实例的 $emit 自定义事件 2.、接受数据者 使用原型上的vue实例的 $on 监听 main.js中： //单一事件管理 挂载到全局 Vue.prototype.Event=new Vue() 三个组件 a.vue b.vue c.vue index.vue index.vue是a、b、c的
【JavaScript源代码】详解从vue的组件传值着手观察者模式.docx
12-30
【JavaScript源代码】详解从vue的组件传值着手观察者模式 在JavaScript中，Vue框架是一种广泛应用的前端开发工具，其核心设计思想包含了观察者模式的元素。观察者模式是一种软件设计模式，它定义了对象间的一种一对...
非父子组件之间的三种传值办法
Qian_mos的博客
04-22 3774
非父子组件之间的传值 兄弟组件的传值：总线—发布订阅者—观察者模式 Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例 <div id="root"> <child content="miss"></child> <child content="mos"></child> &l...
非父子组件之间的传值
hao_sir
12-24 122
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./
vue的非父子组件的传值详细解析
xiaonanhaijing的博客
10-28 312
首先我们看一张图 图上 看上图 我们应该如何做 是不是感觉很麻烦? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src='./vue.js'></script> </head> &.
非父子组件的数据传递
wd
09-05 608
复制代码可以直接查看效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script> <styl
VUE 非父子组件传值
julili_1989的博客
04-27 130
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2、在要广播的地方引入刚才定义的实例 3、通过 VueEmit.$emit('名称','数据') 4、在接收收数据的地方通过 $om接收广播的数据 VueEmit.$on('名称',function(){ }) ...
非父子组件传值
Geordies的博客
02-15 118
# 非父子组件间传值 当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex (opens new window)实现之外，还可以通过Bus(或者叫 总线/发布订阅模式/观察者模式)的方式实现非父子组件间传值。 <div id="root"> <child1 content="组件1：点我传出值"></child1> <child...
非父子组件的传值
VVVZCS的博客
09-03 1982
我们可以把网页拆分成很多个部分 首先是一个大的网页，然后上面是一个组件，左边也是一个组件，但是又可以拆分成2个组件，右边也是一个组件，但是也可以细分为3个组件 那么现在我想要父子组件传值可以通过： 父组件-子组件：通过props传值 子组件-父组件：通过事件触发传值 那么现在我想要第一层的组件和第三层的组件传值，如果用父子组件传值方法，那么就只能一层一层传，如果我现在想要右边的第三层...
vue非父子组件之间传值
xfmuchengxue的博客
07-10 713
记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。为了实现头部的搜索框，搜索table表格中的数据，因为是两个页面，所以需要组件传值。首先，main.js中创建事件中心eventHubnew Vue({ el: '#app', router, components: { App }, template: '&lt;App/&gt;', // 非父子组件传递数据,创建事件中心e...
Vue数据绑定原理探索：Object.defineProperty与发布/订阅者模式
"本文主要浅析了Vue.js中的数据绑定机制，通过实例代码展示了双向数据绑定的使用，并探讨了其实现原理，包括Object.defineProperty的使用以及发布/订阅者模式的应用。" 在Vue.js中，数据绑定是其核心特性之一，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值