vue-typescript组件在项目中的几种通信方式

Bertha 。 2023-02-11 07:15 18阅读 0赞

## 前言 ##

在项目中，经常会遇到各种组件与组件之间，父子组件，子父组件之间的数据交互问题，而单个组件的实例出来的数据又是相互独立的，这就意味着不同组件之间的数据无法相互引用，在项目中，大部分的项目中，一般会有几种方式，需要我们去解决，解决了项目的组件通信问题，也就意味着，我们可以把很多的公共的部分进行封装，然后供其它组件之间的引用。

> 针对不同的使用场景，在项目中有几种方式可以使用，如：props、 $emit/ $on、vuex、 $parent / $children、  
> $attrs/ $listeners和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。

## 一、 props/ $emit ##

父组件 A 通过props的方式向子组件B传递，B to A 通过 B 组件中 $emit事件在 A 组件中绑定（v-on）的方式实现。

1、父组件向子组件传值（props）

父组件

<template>
      
      <div class="app-container">
        <aside>父组件与子组件之间的双向数据通信</aside>
        <el-button type="primary" plain @click="addData">添加数据</el-button>
        <div>
          <child :itemData="listData" />
          
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue } from 'vue-property-decorator'
    import child from './components/child.vue'
    @Component({ 
      name: 'Test',
      components: { 
        child
      }
    })
    export default class extends Vue { 
      private listData: any = [
        { 
          name: 'aaaaaa',
          value: 1
        },
        { 
          name: 'bbbbbb',
          value: 2
        }
      ]
      private addData() { 
        this.listData.push({  name: 'cccc', value: 3 })
      }
    }
    </script>
    
    <style lang="scss" scoped>
    </style>

子组件

<template>
      <div>
        <div>
          <div class="prop-line">
            1、通过Prop传递过来的值
          </div>
          <div v-for="(item,index) in itemData" :key="index">{ { item.name}}</div>
          
          <div class="get-line">
            2、通过get方式返回传递过来的值
            <div>{ { getData}}</div>
          </div>
          <div class="get-line">
            3、通过set方式对传递过来的值进行计算
            <el-button type="primary" plain @click="computeData">计算数据</el-button>
            <div>{ { getNewData}}</div>
          </div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop } from 'vue-property-decorator'
    
    @Component({ 
      name: 'Test'
    })
    export default class extends Vue { 
      @Prop({  default: [] }) private itemData!: any[]
      private getNewData: any[] = []
    
      get getData() { 
        return this.itemData
      }
    
      set getData(val) { 
        this.getNewData = val;
      }
    
      private computeData() { 
        this.getData = [{  name: 'eeeee', value: 5 }]
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .prop-line { 
      padding: 10px 0;
      display: block;
    }
    .get-line { 
      padding: 10px 0;
      margin-top: 20px;
      display: block;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70]  
父组件通过props向下传递数据给子组件共有三种形式：data、props、computed

## 2、子组件向父组件传值（通过$emit事件） ##

在项目中有这么一个需求，当我们引用子组件时，需要点击子组件的（click,change…）事件，来传递数据给父组件，那么父组件中需要拿到这个子组件的数据进行整合，可以使用$emit事件

父组件

<template>
      <div>
        <div>
          <div class="prop-line">
            1、通过Prop传递过来的值
          </div>
          <div v-for="(item,index) in itemData" :key="index">{ { item.name}}</div>
          
          <div class="get-line">
            2、通过get方式返回传递过来的值
            <div>{ { getData}}</div>
          </div>
          <div class="get-line">
            3、通过set方式对传递过来的值进行计算
            <el-button type="primary" plain @click="computeData">计算数据</el-button>
            <div>{ { getNewData}}</div>
          </div>
          <div class="get-line">
            4、通过$emit事件传递参数给父组件
            <el-button type="primary" plain @click="handleEmit">子传参给父组件</el-button>
          </div>
        </div>
      </div>
    </template>
    
    <script lang="ts">
    import {  Component, Vue, Prop } from 'vue-property-decorator'
    
    @Component({ 
      name: 'Test'
    })
    export default class extends Vue { 
      @Prop({  default: [] }) private itemData!: any[]
      private getNewData: any[] = []
    
      get getData() { 
        return this.itemData
      }
    
      set getData(val) { 
        this.getNewData = val;
      }
    
      private computeData() { 
        this.getData = [{  name: 'eeeee', value: 5 }]
      }
    
      private handleEmit() { 
          this.$emit('setDataToIndex','这是子组件传给父组件的数据')
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .prop-line { 
      padding: 10px 0;
      display: block;
    }
    .get-line { 
      padding: 10px 0;
      margin-top: 20px;
      display: block;
    }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 1]  
子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

## 三、 组件与组件之间的通信（$emit/ $on） ##

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。  
bus.js

import Vue from 'vue';
    
    // 使用 Event Bus
    const bus = new Vue();
    
    export default bus;

引入bus

import bus from '../common/bus';
    
    bus.$emit(事件名,要传递的数据);
    bus.$on(事件名,data => { });
    
    //$emit定义的事件名与$on接收的事件名必须一致

$on 监听了自定义事件 data，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

## 四、通过状态管理器vuex ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 2]

#### 1、简要介绍Vuex原理 ####

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过执行Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作常见于调用后端接口异步获取更新数据或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

#### 2、各模块在流程中的功能 ####

*  Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
 *  dispatch：操作行为触发方法，是唯一能执行action的方法。
 *  actions：操作行为处理模块,由组件中的 $store.dispatch(‘action 名称’,data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
 *  commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
 *  mutations：状态改变操作方法，由actions中的 commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
 *  state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
 *  getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

#### 3、Vuex与localStorage ####

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。

## 五、$attrs/ $listeners ##

## 六、provide/inject ##

1.简介  
Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

2.举个例子

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

// A.vue
    export default { 
      provide: { 
        name: '浪里行舟'
      }
    }
    // B.vue
    export default { 
      inject: ['name'],
      mounted () { 
        console.log(this.name);  // 浪里行舟
      }
    }

可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 浪里行舟，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。

需要注意的是：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。

3.provide与inject 怎么实现数据响应式

一般来说，有两种办法：

provide祖先组件的实例，然后在子孙组件中注入依赖，这样就可以在子孙组件中直接修改祖先组件的实例的属性，不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props，methods

使用2.6最新API Vue.observable 优化响应式 provide(推荐)

我们来看个例子：孙组件D、E和F获取A组件传递过来的color值，并能实现数据响应式变化，即A组件的color变化后，组件D、E、F不会跟着变（核心代码如下：）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 3]

// A 组件 
    <div>
          <h1>A 组件</h1>
          <button @click="() => changeColor()">改变color</button>
          <ChildrenB />
          <ChildrenC />
    </div>
    ......
      data() { 
        return { 
          color: "blue"
        };
      },
      // provide() { 
      // return { 
      // theme: { 
      // color: this.color //这种方式绑定的数据并不是可响应的
      // } // 即A组件的color变化后，组件D、E、F不会跟着变
      // };
      // },
      provide() { 
        return { 
          theme: this//方法一：提供祖先组件的实例
        };
      },
      methods: { 
        changeColor(color) { 
          if (color) { 
            this.color = color;
          } else { 
            this.color = this.color === "blue" ? "red" : "blue";
          }
        }
      }
      // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
      // provide() { 
      // this.theme = Vue.observable({ 
      // color: "blue"
      // });
      // return { 
      // theme: this.theme
      // };
      // },
      // methods: { 
      // changeColor(color) { 
      // if (color) { 
      // this.theme.color = color;
      // } else { 
      // this.theme.color = this.theme.color === "blue" ? "red" : "blue";
      // }
      // }
      // }
    // F 组件 
    <template functional>
      <div class="border2">
        <h3 :style="{ color: injections.theme.color }">F 组件</h3>
      </div>
    </template>
    <script>
    export default { 
      inject: { 
        theme: { 
          //函数式组件取值不一样
          default: () => ({ })
        }
      }
    };
    </script>

虽说provide 和 inject 主要为高阶插件/组件库提供用例，但如果你能在业务中熟练运用，可以达到事半功倍的效果！

## 七、$parent / $children ＆ ref ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522121807184.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200522130829800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200525152619611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628164612252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmd6aG91ZmVuZw==,size_16,color_FFFFFF,t_70