Vue非父子组件传值
https://blog.csdn.net/qq_49867247/article/details/123493323
Miracle sir
已于 2022-03-15 10:46:08 修改
2643
收藏 7
文章标签： vue.js javascript 前端
版权
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
一、非父子组件传值
二、事件总线
2.$attrs / listeners
VueX是笔者认为最稳定的非父子传值的方法，笔者也会单独写出文章详解
总结
前言
本节紧接这上一篇，说说如何在非父子组件中进行组件之间的传值
一、非父子组件传值
（1）事件总线
（2）$attrs / listeners
二、事件总线
事件总线的原理就是：
创建一个公共的Js文件，让其专门负责传值。就像公共的交通工具bus，data可以乘坐这辆bus到达指定的站台（相应的组件）
那么首先要做的就是在我们的项目中创造这辆bus
1.闭门造车（创建公用JS文件）
首先得在城市中（src目录下）租块地（创建一个文件夹），放置这辆bus。
bus.js的创建十分简单，只要粘贴以下代码：
import Vue from 'vue';
export default new Vue;
1
2
当然造车的方法有很多种，笔者只想给你最便捷的一种。
2.上车
既然坐车就要刷卡，刷卡的方式也很简单，在需要传递数据的组件中引入bus.js
import bus from './bus.js'
1
之后bus出发，在该组件中发射事件，发射事件需要一个媒介，在本篇就用button的click事件触发：
<button @click="appmsg">bus传递data</button>
1
在methods中定义事件：
methods:{
appmsg(){
bus.$emit('getonbus','App')
}
}
1
2
3
4
5
上车出发过程完成
3.下车
下车也要刷卡，方式相同，在需要接收数据的组件中引入bus.js
import bus from './bus.js'
1
在示例中提前定义了一个变量value
data(){
return{
value:"Home"
}
}
1
2
3
4
5
到站接收数据，在接收组件的mounted中接收，代码如下：
mounted(){
bus.$on('getonbus', val => {
this.value = val
})
}
1
2
3
4
5
至此我们已经完成了数据的传输，我们来看看效果：
html代码：
<p>{{value}}</p>
1
效果：
点击前：
点击后：
这确实是一个十分方便的方法，但是：
事件总线方式传递数据同时需要及时的移除事件监听，这对于初学者是个麻烦事，因此
换种方法往下看吧，哈哈
2.$attrs / listeners
这种传值方式主要是用于多级组件的传值，其实还是得保持一种“血脉联系”
例如爷爷组件给孙子组件传值，当然这借助简单的v-bind也是可以实现的，但是如果我们就是想跳过父组件就可以用这种方式；
在示例中的组件关系如下：Home(爷爷)>parent(父亲)>child(孩子)
在Home中定义数据，并传入parent：
<template>
<div class="home">
<p>{{value}}</p>
<parent :msga="a" :msgb="b" :msgc ="c"></parent>
</div>
</template>
<script>
import parent from './parent.vue'
export default {
name: 'home',
components: {
parent
},
data(){
return{
value:"Home",
a:"aaa",
b:"bbb",
c:"ccc"
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
在父组件中需要定义一个v-bind
<template>
<div>
<child v-bind="$attrs"></child>
</div>
</template>
1
2
3
4
5
在孙子组件中打印$attrs
mounted(){
console.log(this.$attrs)
}
1
2
3
我们来看打印台结果：
孙子得到了爷爷全部的数据，真正的隔代亲！
$listeners大家自己可以试试，爷爷会直接得到孙子发射的事件。
这种方法可以看成props / $emit的延续版，对比学习，效果更佳
VueX是笔者认为最稳定的非父子传值的方法，笔者也会单独写出文章详解
总结
本篇主要讲解了非父子传值的两种方法，深入浅出，让大家对vue传值有更好的理解。
————————————————
版权声明：本文为CSDN博主「Miracle sir」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_49867247/article/details/123493323
非父子组件之间的三种传值办法
http://t.csdn.cn/OOEEV
Qian_mos
于 2019-04-22 12:29:32 发布
3399
收藏 2
分类专栏： 前端 文章标签： Vue 非父子传值
版权
前端
专栏收录该内容
35 篇文章0 订阅
订阅专栏
非父子组件之间的传值
1.兄弟组件的传值：bus总线—发布订阅者—观察者模式
Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例
<div id="root">
<child content="miss"></child>
<child content="mos"></child>
</div>
<script>
Vue.prototype.bus = new Vue(); //兄弟间传值关键语句
Vue.component('child', {
data: function() {
return {
selfContent: this.content //拷贝父组件参数，以便修改，子组件用到content的地方修改为selfContent
}
},
props: {
selfContent: String
},
template: '<div
@click="handleClick">{{selfContent}}</div>
>',
methods: {
handleClick: function() {
// alert();
this.bus.$emit('change', this.selfContent);
}
},
mounted: function() {
//保存this指针，后续this.bus使得this.selfContent的this指向会改变
var this_ = this;
this.bus.$on('change', function(msg) {
this_.selfContent = msg; //子组件不可以更改父组件值，若需要改要拷贝值作为自己的属性值
})
}
})
var vm = new Vue({
el: '#root'
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2.利用vuex状态管理进行状态共享达到传值的目的
3.以及当兄弟节点有共同的父节点时可以利用两次父子传值达到兄弟传值的目的。
————————————————
版权声明：本文为CSDN博主「Qian_mos」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Qian_mos/article/details/88872326