前言： 在前端我的项目中牵扯的最多的莫过于组件之间的传值了，除了最最罕用的 props 和 emit，其实在 Vue 中还额定提供了另外几种办法。明天分享一种组件之间通信的办法。

一. 场景再现

  1. 先别着急思考题目这个 api 的含意。在这里我先入手写一个比拟常见的场景。
    所对应的组件外部代码比较简单，这里我就不展现了，逻辑上就是 这三个组件层层援用。

    所对应的页面成果如下：
  2. 如上图，这是一个在我的项目中很常见的一个场景，三层嵌套的组件。(其实还有深层次的嵌套，目前咱们拿三层嵌套举例足矣)
  3. ok，你当初的需要是：在爷爷组件内须要提供一个字符串数据 “韩振方” 去提供给 儿子组件应用。
  4. 聪慧的你必定想到了 props，废话不多说，咱们间接上手。

二. 传递 Props

  1. “我认为多浅近呢，这不就是数据父传子的场景吗？我间接传递 props 去实现这个需要。”
  2. 于是我会在 GrandFather.vue写下这样一段代码
  3. 接下来就该去 Father.vue 组件去接管这个数据了。于是咱们在 Father.vue 组件定义了 props 去接管这个值。

    咱们看一眼页面

    没什么问题，爸爸组件曾经收到了。然而别忘了咱们工作还没实现呢，咱们的需要是给儿子组件应用，
  4. 于是咱们又连忙接着往下传递。
  5. 所以当初咱们的 Children.vue 组件的样子就变成这个样子。

    页面成果如下:

    最终咱们的 儿子组件 也的确拿到了。
  6. 写到这里你发现了一些不太对劲的中央吗？
  7. 其实咱们的爸爸组件是齐全不须要晓得这些属性的，它仅仅只是充当了一个传话筒。如果这个组件单纯是这一个应用场景还好，然而一旦咱们想要在第二个中央复用爸爸组件的时候，咱们会发现问题就来了。咱们必须给这个爸爸组件提供一个叫做 message1 的 props，然而实际上这个 message1 并不是一个爸爸组件外部本人应用的一个属性。
  8. 写到这里你发现了，仅仅只多传递了一层，就导致组件的复用性变得很差。这还是仅仅只嵌套了三层的场景，一旦到了第四层，你会发现事件逐步开始变得辣手起来了，如同 props 并不是一个好的抉择了。
  9. 想到这里你会开始思考，有没有更好的解决办法呢？你别说，还真有，那就是咱们明天的配角，provide 和 inject。

三. provide 和 inject

  1. 首先不要死记硬背 api 的名字，作者起名字必定都是有起因的。在很多状况下咱们通过先看这两个单词的意思。

  2. 单从这两个单词的含意就大略能猜出个大略的意思，一个是提供某个值，另一个是去注册，接管这个值。
  3. 那么问题就引出来了，咱们怎么正确的应用这两个 api 呢？其实很简略，让咱们回到爷爷组件，还原他最后的模样。
  4. 你做的仅仅只须要两步：

    或者你会诧异，就这样就行了？我明确通知你，是的，这样就行了。
  5. 接下来最初一步，去儿子组件接管应用就功败垂成了。

    咱们看一下页面成果:
  6. 不仅仅数据胜利拿到了，而且要害的是咱们的爸爸组件是干干净净的，丝毫不影响其余中央对它的援用。
  7. 咱们再回过头解说 provide 的用法。provide 承受两个参数。第一个参数须要是一个举世无双的标识（不容许和组件外部的变量重名），第二个参数就是筹备传递的值。
    你也能够这样了解，当初爷爷组件拿着一个喇叭在喊：“谁要‘韩振方’，谁要‘韩振方’，价格便宜，仅仅须要一个‘message’”。
  8. 这时候儿子组件听到了这个音讯，大喊：“我要我要！！”于是它就连忙 inject 了一个 “message”。

    留神： 你用于承受的变量名字是轻易起的，不须要你和后面保持一致。
  9. 而爸爸组件丝毫不想要，所以它就压根不须要 inject。
  10. 并且 inject 还能够容许你有个兜底的行为。什么意思? 假如这个儿子组件在别的中央也须要复用，然而它的爷爷组件或者它压根就没有爷爷组件，那么第二个参数将作为 suibian 的默认值。
  11. 咱们测试一下，咱们首先勾销了爷爷组件的 provide 行为。

    能够看到，页面正确的显示了咱们的兜底数据。

三. provide 的进阶用法

  1. provide 的作用远远不止提供字符串类型数据而已，咱们在爷爷组件申明一个响应式的数据试试。
  2. 让咱们看一下儿子组件是否能够正确的响应。

    能够看到，的确是能够的。
  3. 当初儿子组件长大了，它说我本人也想控制数字的增长，能够吗？爷爷组件是很宠孙子的，于是又提供了一个办法给孙子应用。
  4. 儿子组件真的能够本人管制吗？孩子真的长大了吗？

    咱们测试一下：

    能够看到儿子组件的确是长大了（指胜利 inject 了爷爷组件 provide 的函数）
  5. 千万不要转头就忘，第二个参数是咱们的兜底行为。如果爷爷没提供函数，我就本人应用一个没有任何行为的箭头函数。仅此而已。

四. 源码

爷爷组件代码

<script lang="ts" setup>// 这是爷爷组件import { ref } from "vue";import { provide } from "vue";import Father from "./Father.vue";const count = ref<number>(0);function add() {  count.value = count.value + 1;}provide("message", count);provide("messageAdd", add); //我把 add 也同时提供给儿子组件</script><template>  <div class="w-full h-[300px] bg-[black]">    <span class="text-white text-[20px]">爷爷组件</span>    <button @click="add">message+1</button>    <Father />  </div></template>

父亲组件代码

<script lang="ts" setup>// 这是父亲组件import Children from "./Children.vue";</script><template>  <div class="w-[70%] h-[270px] bg-[pink]">    <span class="text-[black] text-[20px]">爸爸组件</span>    <span class="text-[black] text-[15px]"></span>    <Children />  </div></template>

儿子组件代码

<script lang="ts" setup>// 这是儿子组件import { inject } from "vue";const suibian = inject("message", "如果爷爷没提供没有的话就用我");const add = inject("messageAdd", () => {});</script><template>  <div class="w-[70%] h-[230px] bg-[white]">    <span class="text-[black] text-[20px]">儿子组件</span>    <span class="text-[black] text-[10px]">{{ suibian }}</span>    <button @click="add">长大了，我本人+1</button>  </div></template>

五. 思考题

如果我当初爷爷组件和父亲组件同时提供了一个雷同的关键词的值，儿子组件最初会应用谁的呢？

GrandFather.vue: => provide("message","爷爷组件提供的");
Father.vue: =>provide("message","父亲组件提供的")

Children.vue:=> inject("message","我应用谁的？")