前言

组件是 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"; export default { 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> export default { 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 export default { 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> export default { props: [articles], methods: { emitIndex(index) { this.$emit(onEmitIndex, index) // 触发父组件的方法   




    




    




 ，并传递参数index } } } </script>

2


     


     


     、ref / $refs

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

ref：这个属性用在子组件上














，它的用用就指向了子组件的实例               ，可以通过实例来访问组件的数据和方法

用法：

在子组件中：

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

在父组件中：

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

3
 




 




 



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

eventBus事件总线适用于父子组件   

   

   

、非父子组件等之间的通信    



     



     



 ，使用步骤如下：

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

// event-bus.js import Vue from vue export const EventBus = new Vue()

（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 export default { components: { firstCom, secondCom } } </script>

在firstCom组件中发送事件：

<template> <div> <button @click="add">加法</button> </div> </template> <script> import {EventBus} from ./event-bus.js // 引入事件中心 export default { 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 export default { 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> export default { data() { return { message: Vue } }, computed:{ parentVal(){ return this.$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 export default { 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; export default { 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; export default { 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> export default { 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 的思想就是将这一些公共的数据抽离出来














，将它作为一个全局的变量来管理               ，然后其他组件就可以对这个公共数据进行读写操作    



     



     



 ，这样达到了解耦的目的
   

   

   
。