跨级组件通讯依赖注入provide与inject函数

使用条件：爷孙之间的数据通讯

说明：我们将以以下案例简单讲明白怎么使用。（在Vue3.0举例说明）

接下来我们通过一个小案例，运用一下provide和inject函数

注意：认真看完，你会发现超级简单，立刻秒会，秒懂，秒用！！！！！！

 

• 祖先组件：App.vue

<script setup>
import { provide, ref } from 'vue';
import ParentCom from './ParentCom.vue';

// 1. app组件数据传递给child
const count = ref(0);
provide('count', count);

// 2. app组件函数传递给child，调用的时候可以回传数据
const updateCount = (num) => {
  count.value += num;
};
provide('updateCount', updateCount);
</script>

<template>
  <div
    class="app-page"
    style="border: 10px solid #ccc; padding: 50px; width: 600px"
  >
    app 组件 {{ count }} updateCount
    <ParentCom />
  </div>
</template>

• 父级组件：ParentCom.vue

<script setup>
import ChildCom from './ChildCom.vue';
</script>

<template>
  <div class="parent-page" style="padding: 50px">
    parent 组件
    <hr />
    <ChildCom />
  </div>
</template>

• 子级组件：ChildCom.vue

<script setup>
const count = inject('count');
const updateCount = inject('updateCount');
</script>

<template>
  <div class="child-page" style="padding: 50px; border: 10px solid #ccc">
    child 组件 {{ count }} <button @click="updateCount(100)">修改count</button>
  </div>
</template>

总结：

• provide和inject是解决跨级组件通讯的方案

  • provide 提供后代组件需要依赖的数据或函数
  • inject 注入（获取）provide提供的数据或函数

• 官方术语：依赖注入

  • App是后代组件依赖的数据和函数的提供者，Child是注入（获取）了App提供的依赖