vue3 inject povide传值

povide，inject可跨组件传值，使用方式如下：

父组件

使用povide发送值

<template>
  <div class="wrap">
    <h3>父组件</h3>
    <p>父组件： {{ fVal }}</p>
    <child></child>
  </div>
</template>
<script setup>
import {  ref, provide } from "vue";
import child from "./components/child.vue";
let fVal = ref("fVal");
const info = reactive({
  title: "父组件向孙子组件传值",
  date: "2022/3/17",
});
// 提供数据 提供的数据名，数据值
provide("info", info);
</script>

子组件

<template>
  <div class="wrap">
    <h4>子组件</h4>
    <p>子组件：{{ child }}</p>
    <grandChild></grandChild>
  </div>
</template>
<script setup>
import { ref } from "vue";
import grandChild from "./grandChild.vue";
let child = ref("child");
</script>

孙子组件

使用inject接收值

<template>
  <div class="wrap">
    <h6>孙子组件</h6>
    <p>孙子组件: {{ grandChild }}</p>
    <ul>
      <li v-for="(item, i) in info" :key="i">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref, inject } from "vue";
let grandChild = ref("grandChild");
let info = inject("info");
</script>