15.0 vue3 provide&inject跨组件通信方式

上一篇：

14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇：vue3 toRaw&markRawhttps://blog.csdn.net/qq_42543244/article/details/122793302本篇记录vue3的customRef，customRef是vue3的一大亮点，custom的意思大家都懂，自定义的意思，一旦出现自定义，那么就代表我们可以做很多基于自己的需求的操作，vue3的官方文档的关于这块的示例其实已经蛮不错了，看代码需求是这样，我们需要做一个模糊搜索 输入框防抖的效果，在输入框内输入内容，一秒内不再输入就去发https://blog.csdn.net/qq_42543244/article/details/122815091本篇记录vue3的两个api：provide & inject，可以看做是实现多级组件之间的数据传递。

先来看一张官网的描述图：

 话不多说，直接看代码

App.vue

<template>
  <div class="grand">
    <h1>我是app---姓名：{{ person.name }}--年龄：{{ person.age }}</h1>
    <button @click="changePerson">改变peron</button>
    <child></child>
  </div>
</template>

<script>
import {provide, reactive} from "vue";
import Child from "@/components/Child.vue";

export default {
  name: "App",
  components: {
    Child,
  },
  setup() {
    /*
      通过provide & inject 实现多级组件之间的数据传递--可理解为祖组件向后代组件的通信
      实际上，你可以将依赖注入看作是“长距离的 prop”；
      通常，当我们需要从父组件向子组件传递数据时，我们使用 props。
      想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。
      在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
      对于这种情况，我们可以使用一对 provide 和 inject。
      无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。
      这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据
    */
    let person = reactive({name: "xiaomi", age: 18});
    provide("person", person);

    function changePerson() {
      person.name = "ming";
      person.age = 22;
    }

    return {person, changePerson};
  },
};
</script>
<style scoped>
.grand {
  background-color: rgb(150, 156, 154);
  padding: 50px;
}
</style>

Child.vue

<template>
  <div class="child">
    <h2>我是child ---姓名：{{ person.name }}--年龄：{{ person.age }}</h2>
    <son></son>
  </div>
</template>

<script>
import { inject } from "vue";
import Son from "./Son.vue";
export default {
  components: { Son },
  setup() {
    let person = inject("person");
    console.log(person);
    return { person };
  },
};
</script>

<style scoped>
.child {
  background-color: rgb(22, 129, 201);
  padding: 50px;
}
</style>

Son.vue

<template>
  <h3 class="son">
    我是son ---姓名：{{ person.name }}--年龄：{{ person.age }}
  </h3>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    let person = inject("person");
    console.log(person);
    return { person };
  },
};
</script>

<style scoped>
.son {
  background-color: rgb(218, 199, 29);
  padding: 30px 0;
}
</style>

效果图

下一篇：

https://blog.csdn.net/qq_42543244/article/details/122967700https://blog.csdn.net/qq_42543244/article/details/122967700