vue组件的通信方式

一、props与$emit

二、ref/$ref

三、eventBus

四、provide与inject

五、$children与$parent

六、$attrs / $listeners

前言： 组件作为vue最强大的功能之一，但每个组件实例模块却是彼此独立的，这就意味着他们之间无法直接的进行引用，这时候，它们之间的通讯就变得十分重要了。

一、props与$emit

props是子组件中的一个属性，可以是数组也可以是对象，是对象时会对接收数据进行判断操作。其只能用于接收父组件中传入的数据，如果想向父组件中传递数据，需要使用$emit方式并向里面加入对应参数，父组件使用v-on方式进行相互绑定即可。

父组件的传入数据方式与接收子组件传回数据方式

其中 :parHandData 为自定义的名字，子组件的props与其对应即可，list为data中定义好的数据

使用v-on绑定子组件$emit写入的自定义事件

// 父组件中
<template>
    <div id="app">
        // 使用子组件
        <son-module :parHandData="list" v-on:binding="dinMetcik"></son-module>  // 将数据传递给子组件
    </div>
</template>
<script>
    // 引入子组件
    import sonModule from ./sonModule.vue
    export default {
        name: "father",
        components: sonModule // 注册子组件
		data() {
			return {
                list: [
					    {id:1,name:"imac",price:1},
						{id:2,name:"ipad",price:2},
					    {id:3,name:"iphone",price:3}
				]
            }
		},
        methods: {
            // 通过绑定触发的一个事件，接收到的参数为子组件中$emit传入的两个参数
            dinMetcik(sonParamaO,sonParamaT){
                sonParamaO.price = sonParamaT;
            }
        }
    }
</script>

子组件的接收

注意：接收的数据外面需要嵌套引号，如需使用，直接this.:parHandData即可

如需传回父组件，使用$emit内写入相应参数

// 子组件中
export default {
    name: son,
    props: ["parHondData"], // 接收到父组件传递的数据
    mounted(){
        console.log(this.parHondData); // 挂载后显示一下
        // 传入父组件的参数,第一个为自定义事件，后两个为参数
        this.$emit("binding",this.parHondData[2],this.parHondData[2].price+1);
    }
};

当然，子传父的$emit方法有3种传递方式，还有syan指令配合updata绑定和model属性操作方式。props作为最传统的通信方式，正常父子通信轻松实现，其实很多场景下的通信也都能够实现，但是可能要有很多个props与$emit来回嵌套，所有有必要出现更方便多样的通信方式。

二、ref/$ref方式

父组件中对子组件数据进行操作

ref使用在子组件中，相当于为父组件中使用注册的子组件绑定一个标识，标识到的子组件会存在与父组件中的this.$ref，这里面包含了标识过的子组件的基本所有信息。

// 父标签中
<template>
    <son ref="child"></son>
</template>
<script>
    export default {
        name: "father",
        data() {
			return {
               hondChild: "传入子元素的数据"
            }
		},
        mounted(){
            console.log(this.$ref.child); // 打印的为整个子组件中的内容
            // 如果需要对子组件中的值进行改变,可直接在父组件中进行操作
            this.$ref.child.hondPar = this.hondChild;
        }
		
    }
</script>

子组件中

在子组件中查找父组件，只需其使用this.$parent即可查到父组件中的所有内容

this.$parent,顾名思义，就是当前组件父亲，即父组件。如果查找爷爷的话，则是this.$parent.$parent

如果想要传递，则可以效仿上面父组件中操作子组件的方式

<script>
	export default {
		name: "son",
        data(){
            return {
                hodePar: ""
            }
        },
        mounted(){
            // 在父组件中已找到子组件内容并将其修改
            console.log(this.hodePar); // 传入子元素的数据
        }
	};
</script>

三、eventBus

eventBus事件总线适用于父子组件、非父子组件等之间的通信。

使用eventBus方式的话，则需要在外部建立一个js文件，里面注入相应代码后，即可作为组件的事件管理中心，类似于代理人。

注入代码如下：

// 因为需要使用vue,所以引入vue
import Vue from "vue"
// 创建一个相互传递中间的代理人
export const EventBus = new Vue();

在事件管理中心创建好后，要进行传递数据的组件需要在内部引入以上创建的js代码进行使用

以下假设有两个需要传递数据的兄弟组件BrotherGe和BrotherDi

弟弟向哥哥传递方式如下

<script>
	// 需要属于代理人进行传递,所以需要引入代理人
	import {EventBus} from './EventBus.js'	
	export default{
		name: "BrotherDi",
		data(){
			return {
				Di_date: "传给哥哥的数据"
			}
		},
		mounted(){
			// 自定义一个标识并写入要传递的数据发送给哥哥
			EventBus.$emit("assd",{val:this.Di_date});
		}
	}
</script>

哥哥接收的方式如下

<script>
	import {EventBus} from '../EventBus.js'	
	export default{
		name: "BrotherGe",
		data(){
			return {
				Ge_date: ""
			}
		},
		mounted(){
			// 哥哥使用$on监听到弟弟发送到的,并使用内部数据进行接收
			EventBus.$on("assd",({v}) => {this.Ge_date = v});
            console.log(this.Ge_date); // 传给哥哥的数据
		}
		
	}
</script>

四、provide/inject

注入/依赖(provide/inject)通信方法，用于处理父子组件、爷孙组件、亦或者隔代许多的组件都相对方便，层数再深也好处理，一步解决，不用一层一层去传递数据了。且相互传递的两个组件是相互绑定的，也就是说，在子组件中改变其数据时也会影响父组件的。

provide与inject是vue提供的两个钩子，和data、methods等同级，其中provide与data写法相似，都是一个函数，通过return返回出要传递的数据。而inject类似于props，可以是数组也可以是对象，能接收到provide传入的数据。

provide传递方式如下

<script>
	export default{
		name: "parProvide",
		data(){
			return {
				proCs: "provide传给子代的"
			}
		},
        provide(){
			return {
				proCs: this.proCs // 参数名为自定义，参数值为当前组件里的内容
			}
		}
	}
</script>

inject接收方式如下

<script>
	export default {
		name: "sonInject",
		// 接收父组件通过Provide属性传入的数据
		inject: ["proCs"], // 如果修改proCs的数据,父组件也会相应改变的
		mounted(){
            console.log(this.proCs); // provide传给子代的
        }
	}
</script>

五、$children与$parent

听其名，闻其意。$children可以在父组件中直接访问到子组件的实例，而$parent可以在子组件中访问到父组件的实例，基本包含到了所有信息。这里需要注意以下，因为父组件会有多个子组件，而子组件只能有一个父组件，所以当在父组件中使用this.$children时访问到的会是一个数组，这个数组中包含着所有的子组件，即this.$children[index]来访问用到的子组件。相反，子组件访问父组件则不需要。

这种方式可以直接访问到数据，不需要刻意的代码去传递参数。

父组件中访问子组件

<script>
	import children from './children.vue'	
	export default{
		name: "father",
        conponents: {
            children
        }
		data(){
			return {
				fatherTest: "父组件中的内容"
			}
		},
        mounted(){
            // 访问到子组件中的内容
            console.log(this.$children[0]); // 子组件中的内容
        {
		
	}
</script>

子组件中访问父组件

<script>
	import children from './children.vue'	
	export default{
		name: "children",
        conponents: {
            children
        }
		data(){
			return {
				sonTest: "子组件中的内容"
			}
		},
        mounted(){
            // 访问到父组件中的内容
            console.log(this.$parent.fatherTest); // 父组件中的内容
        {
		
	}
</script>

六、$attrs / $listeners

如果是用props/ $emit 来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用vuex，如果仅仅是传递数据，那可能有点浪费了。

针对上述情况，vue引入了 $attrs / $listeners，实组件之间的跨代通信。

$attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上 $listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）再说一下 inheritAttrs

默认值为true，继承所有的父组件属性除props之外的所有属性。只继承class属性。 $attrs / $listeners的用法： A组件（APP.vue）：

B组件（Child1.vue）：

C 组件 (Child2.vue)：

在上述代码中：

C组件中能直接触发test的原因在于 B组件调用C组件时使用 v-on 绑定了$listeners 属性在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）总结根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为3种类型：父子组件间通信、兄弟组件间通信、任意组件间通信

希望能够有所帮助！