vue组件间的通信方式

Posted 2023-02-08 Huang_xianlong

一、组件间通信的概念

组件是 vue 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。
通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信。组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的。

二、组件间通信的分类

组件间通信的分类可以分成以下：

1. 父子组件之间的通信
2. 兄弟组件之间的通信
3. 跨代组件之间的通信
4. 非关系组件间之间的通信

三、组件间通信的方案

vue中8种常规的通信方案如下：

1. 通过 props 传递
适用场景：父组件传递数据给子组件
子组件设置props属性，定义接收父组件传递过来的参数
父组件在使用子组件标签中通过字面量来传递值
用法：
父组件：

// 父组件
<template>
    <div id="father">
        <son :msg="msgData" :fn="myFunction"></son>
    </div>
</template>

<script>
import son from "./son.vue";
export default 
    name: father,
    components: 
        son
    ,
    data() 
    	return 
        	msgData: "父组件的数据";
        
    ,
    methods: 
        myFunction() 
            console.log("父组件的数据");
        
    
;
</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第一个参数为方法的名字，第二个参数为传递的数值
父组件绑定监听器获取到子组件传递过来的参数
用法：
父组件：

// 父组件
<template>
    <div id="father">
        <son @confirm="handleConfirm"></son>
    </div>
</template>

<script>
import son from "./son.vue";
export default 
    name: father,
    components: 
        son
    ,
    methods: 
        handleConfirm(data) 
            console.log("data");//打印出来的数据是"子组件的数据"
        
    
;
</script>

子组件：

// 子组件
<template>
    <div id="son">
        <button @click="handleEmitParent">按钮</button>
    </div>
</template>
<script>
export default 
    name: "son",
    data() 
    	return 
        	msgData: "子组件的数据";
        
    ,
    methods: 
        handleEmitParent() 
            this.$emit('confirm', this.msgData)
        
    
;
</script>

3. 使用 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>

4. EventBus

使用场景：兄弟组件传值
创建一个中央时间总线EventBus
兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
另一个兄弟组件通过$on监听自定义事件
使用步骤如下：
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值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。

**5. $parent / $children\ast \ast 使用$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属性。
用法：
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声明的）

7. 依赖注入（provide / provide）

这种方式就是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)

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

8. Vuex
Vuex有以下几个部分构成：
1. state
state是存储的单一状态，是存储的基本数据。

2. Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3. Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4. Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5. Module
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moduleA = 
	state:  ... ,
	mutations:  ... ,
	actions:  ... ,
	getters:  ... 


const moduleB = 
	state:  ... ,
	mutations:  ... ,
	actions:  ... 


const store = new Vuex.Store(
	modules: 
		a: moduleA,
		b: moduleB
	
)

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

触发异步请求操作：
this.$store.dispatch('reqHomeData')

actions中：
async reqHomeData( commit ) 
	const result = await server.getHomeData();
	commit(GET_HOME_DATA,  homeList: result )
,

mutations中：
[GET_HOME_DATA](state,  homeList ) 
	state.homeList = homeList
,

四、总结

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

2、跨代组件间通信
跨代组件间通信其实就是多层的父子组件通信，同样可以使用上述父子组件间通信的方法，只不过需要多层通信会比较麻烦。
使用上述的6种方法的$attrs / $listeners方法。
3、兄弟组件间通信
通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。
4、任意组件间通信
使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。