vue项目中的组件传值方式
作者：Dreams゜
vue项目中组件传值
父子通信
父组件parent.vue
<template>
<div id="parentBig">
<Child :dmsg="msg"></Child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
data(){
return {
msg:'要传递的信息'
}
},
components:{
Child
}
}
</script>子组件child.vue
<template>
<div id="childBig">
<h1>{{dmsg}}</h1>
</div>
</template>
<script>
export default {
props: ['dmsg'],// 使用props接收
data(){
return {
}
},
}
</script>子父通信
子组件child.vue
<template>
<div id="childBig">
<button @click="click1">点击</button>
</div>
</template>
<script>
export default {
data(){
return { }
},
methods:{
click1(){
// 添加自定义事件
// 参数1：自定义事件名(string形式)
// 参数2：需要传递的值
this.$emit('Dream', 'aaa')
}
}
}
</script>父组件parent.vue
<template>
<div id="parentBig">
<h1>{{title}}</h1>
<child @Dream="fn"></child>
<!-- @自定义事件名="调用的函数" -->
</div>
</template>
<script>
import child from '@/components/child'
export default {
data(){
return {
title:'文字ing'
}
},
methods:{
fn(res){
console.log('接收自定义事件传的参数',res)
this.title = '已更改为传来的参数：'+res
}
},
components:{
child
}
}
</script>vue非父子组件传值
非父子组件传值
（1）事件总线
（2）$attrs / listeners
事件总线
事件总线的原理就是：
创建一个公共的Js文件，让其专门负责传值。就像公共的交通工具bus，data可以乘坐这辆bus到达指定的站台（相应的组件）
那么首先要做的就是在我们的项目中创造这辆bus
1.闭门造车（创建公用JS文件）
首先得在城市中（src目录下）租块地（创建一个文件夹），放置这辆bus。
bus.js的创建十分简单，只要粘贴以下代码：
import Vue from 'vue'; export default new Vue;
当然造车的方法有很多种，笔者只想给你最便捷的一种。
2.上车
既然坐车就要刷卡，刷卡的方式也很简单，在需要传递数据的组件中引入bus.js
import bus from './bus.js'
之后bus出发，在该组件中发射事件，发射事件需要一个媒介，在本篇就用button的click事件触发：
<button @click="appmsg">bus传递data</button>
在methods中定义事件：
methods:{
appmsg(){
bus.$emit('getonbus','App')
}
}上车出发过程完成
3.下车
下车也要刷卡，方式相同，在需要接收数据的组件中引入bus.js
import bus from './bus.js'
在示例中提前定义了一个变量value
data(){
return{
value:"Home"
}
}到站接收数据，在接收组件的mounted中接收，代码如下：
mounted(){
bus.$on('getonbus', val => {
this.value = val
})
}至此我们已经完成了数据的传输，我们来看看效果：html代码：
<p>{{value}}</p>效果：点击前：
点击后：
这确实是一个十分方便的方法，但是：事件总线方式传递数据同时需要及时的移除事件监听，这对于初学者是个麻烦事，因此换种方法往下看吧，哈哈
$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>在父组件中需要定义一个v-bind
<template>
<div>
<child v-bind="$attrs"></child>
</div>
</template>在孙子组件中打印$attrs
mounted(){
console.log(this.$attrs)
}我们来看打印台结果：
- 孙子得到了爷爷全部的数据，真正的隔代亲！
- $listeners大家自己可以试试，爷爷会直接得到孙子发射的事件。
- 这种方法可以看成props / $emit的延续版，对比学习，效果更佳
VueX是笔者认为最稳定的非父子传值的方法
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。