vue中组件间通信的6种方式

前言

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。

除了使用vuex外还有下面6种组件间的通信方式：

1、 props / $emit

父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信

（1）父组件向子组件传值（props的用法）

props的特点：

• props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
• props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以是传递一个函数。
• props属性名规则：若在props中使用驼峰形式，模板中标签需要使用短横线的形式来书写。

用法：

父组件：

// 父组件<template><div id="father"><son :msg="msgData":fn="myFunction"></son></div></template><script>import son from"./son.vue";exportdefault{name: father,data(){msgData:"父组件数据";},methods:{myFunction(){
            console.log("vue");}},components:{
        son
    }};</script>

子组件：

// 子组件<template><div id="son"><p>{{msg}}</p><button @click="fn">按钮</button></div></template><script>exportdefault{name:"son",props:["msg","fn"]};</script>

（2）子组件向父组件传递数据（$emit的用法）

$emit的特点：

• $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数

用法：

父组件：

// 父组件<template><div class="section"><com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article><p>{{currentIndex}}</p></div></template><script>import comArticle from'./test/article.vue'exportdefault{name:'comArticle',components:{ comArticle },data(){return{currentIndex:-1,articleList:['红楼梦','西游记','三国演义']}},methods:{onEmitIndex(idx){this.currentIndex = idx
    }}}</script>

子组件：

//子组件<template><div><div v-for="(item, index) in articles":key="index" @click="emitIndex(index)">{{item}}</div></div></template><script>exportdefault{props:['articles'],methods:{emitIndex(index){this.$emit('onEmitIndex', index)// 触发父组件的方法，并传递参数index}}}</script>

2、ref / $refs

这种方式也是实现父子组件之间的通信

ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法

用法：

在子组件中：

exportdefault{data(){return{name:'JavaScript'}},methods:{sayHello(){
      console.log('hello')}}}

在父组件中：

<template><child ref="child"></component-a></template><script>import child from'./child.vue'exportdefault{components:{ child },mounted(){
      console.log(this.$refs.child.name);// JavaScriptthis.$refs.child.sayHello();// hello}}</script>

3、eventBus事件总线（$emit / $on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：

（1）创建事件中心管理组件之间的通信

// event-bus.jsimport Vue from'vue'exportconst EventBus =newVue()

（2）发送事件 假设有两个兄弟组件firstCom和secondCom：

firstCom和secondCom的父组件：

<template><div><first-com></first-com><second-com></second-com></div></template><script>import firstCom from'./firstCom.vue'import secondCom from'./secondCom.vue'exportdefault{components:{ firstCom, secondCom }}</script>

在firstCom组件中发送事件：

<template><div><button @click="add">加法</button></div></template><script>import{EventBus}from'./event-bus.js'// 引入事件中心exportdefault{data(){return{num:0}},methods:{add(){
      EventBus.$emit('addition',{num:this.num++})}}}</script>

（3）接收事件

在secondCom组件中接收事件：

<template><div>求和:{{count}}</div></template><script>import{ EventBus }from'./event-bus.js'exportdefault{data(){return{count:0}},mounted(){
    EventBus.$on('addition',param=>{this.count =this.count + param.num;})}}</script>

在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。

4、依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

• provide 钩子用来发送数据或方法。
• inject钩子用来接收数据或方法

用法：

父组件中：

provide(){return{num:this.num  
    };}

子组件中：

inject:['num']

还有另一种写法，这种写法可以访问父组件中的所有属性：

provide(){return{app:this};}data(){return{num:1};}inject:['app']
console.log(this.app.num)

注意： 依赖注入所提供的属性是非响应式的。

5、$parent / $children

• 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
• 使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。

用法：

子组件中：

<template><div><span>{{message}}</span><p>获取父组件的值为:{{parentVal}}</p></div></template><script>exportdefault{data(){return{message:'Vue'}},computed:{parentVal(){returnthis.$parent.msg;}}}</script>

父组件中：

<template><div class="hello_world"><div>{{msg}}</div><child></child><button @click="change">点击改变子组件值</button></div></template><script>import child from'./child.vue'exportdefault{components:{ child },data(){return{msg:'Welcome'}},methods:{change(){// 获取到子组件this.$children[0].message ='JavaScript'}}}</script>

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。

注意：

• 通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
• 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
• 在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
• $children 的值是数组，而 $parent是个对象

6、$attrs / $listeners

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给C组件传递数据，这种隔代传数据的情况该使用哪种方式呢？

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

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

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

再说一下 inheritAttrs

• 默认值为true，继承所有的父组件属性除props之外的所有属性。
• 只继承class属性。

$attrs / $listeners的用法：
A组件（APP.vue）：

<template><div id="app">//此处监听了两个事件，可以在B组件或者C组件中直接触发 <child1 :p-child1="child1":p-child2="child2" @test1="onTest1" @test2="onTest2"></child1></div></template><script>import Child1 from'./Child1.vue';exportdefault{components:{ Child1 },methods:{onTest1(){
            console.log('test1 running');},onTest2(){
            console.log('test2 running');}}};</script>

B组件（Child1.vue）：

<template><div class="child-1"><p>props:{{pChild1}}</p><p>$attrs:{{$attrs}}</p><child2 v-bind="$attrs" v-on="$listeners"></child2></div></template><script>import Child2 from'./Child2.vue';exportdefault{props:['pChild1'],components:{ Child2 },inheritAttrs:false,mounted(){this.$emit('test1');// 触发APP.vue中的test1方法}};</script>

C 组件 (Child2.vue)：

<template><div class="child-2"><p>props:{{pChild2}}</p><p>$attrs:{{$attrs}}</p></div></template><script>exportdefault{props:['pChild2'],inheritAttrs:false,mounted(){this.$emit('test2');// 触发APP.vue中的test2方法}};</script>

在上述代码中：

• C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性
• 在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）

总结

根据以上对这6种组件间的通信方法，可以将不同组件间的通信分为4种类型：父子组件间通信、跨代组件间通信、兄弟组件间通信、任意组件间通信

1、父子组件间通信

• 子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
• 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
• 使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

2、跨代组件间通信

• 跨代组件间通信其实就是多层的父子组件通信，同样可以使用上述父子组件间通信的方法，只不过需要多层通信会比较麻烦。
• 使用上述的6种方法的$attrs / $listeners方法。

3、兄弟组件间通信

• 通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。

4、任意组件间通信

• 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。

如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。