vue 提供注入 provideinject 深层嵌套通信

Posted 2021-08-12 奥特曼　

一、概述

我们用父子传递的时候可能会想到用props传递，但是有时候组件嵌套比较深 可能会出现 祖孙 组件的传递，在vue3.0中是没有事件总线的(eventBus)，我们就可以通过提供注入的方式进行传递数据，提供注入 vue2.0和vue3.0都可以使用

使用步骤

1. 祖先组件 引入 provide  子孙组件中引入 inject

2. 祖先组件中提供数据 provide('数据名',数据)

3. 后代组件中接收数据 inject('数据名')

 二、祖先组件传递数据给子孙数据

祖先组件

<template>
  <div>
    祖组件 {{msg}}
    <Father></Father>
  </div>
</template>

<script>
import { provide,ref } from "vue";
import Father from "./father.vue";
export default {
  components: {
    Father,
  },
  setup() {
    const msg = ref("奥特曼");
    const editMsg=()=>{
        msg.value+='打怪兽'
    }
    provide("name", msg);
    provide("editMsg", editMsg);
    return {msg}
  },
};
</script>

父亲组件

<template>
  <div>
    父组件 {{name}}
    <Son></Son>
  </div>
</template>

<script>
import Son from "./son.vue";
import { inject } from "vue";
export default {
  components: {
    Son,
  },
  setup() {
  const name = inject("name");
    return {name}
    
  },
};
</script>

<style scoped>
</style>

子孙组件

<template>
  <div>孙组件 {{name}} </div>
  <button @click="editMsg">修改</button>
</template>

<script>
import { inject } from "vue";
export default {
  name: "son",
  setup() {
    const name = inject("name");
    const editMsg = inject("editMsg");
    return {name,editMsg}
  },

};
</script>

在 子孙组件中 通过inject 获取了 祖先级组件的 数据，我们在子孙组件中修改祖先级的组件的时候，要在祖先组件中定义一个方法进行修改，不要直接在子孙组件中直接修改。

• 祖先组件中提供数据&操作数据的函数f： provide('函数f', 数据名)

• 后代组件中获取操作数据的函数f，并调用数据： inject('函数f')