Vue provide-inject 用法

父组件向子组件传值用 props，父组件向孙组件传值可以用props想子组件传值，然后子组件再用props 向孙组件传值。这样的话就很麻烦，所以可以用provide inject 来实现。

用法

父组件通过provide 提供依赖，子孙组件都可以使用inject 注入父组件提供的依赖。

1. 父组件提供依赖

<script setup>
  import { provide } from "vue";

  provide(/* 注入名 */ "message", /* 值 */ "hello!");
</script>

2. 应用层(App) 提供依赖

import { createApp } from "vue";

const app = createApp({});

app.provide(/* 注入名 */ "message", /* 值 */ "hello!");

3. 子组件注入依赖

<script setup>
  import { inject } from "vue";
  const message = inject("message");
  //  或者
  const message = inject("message", "默认值");
</script>

4. 响应式依赖

<!-- 在供给方组件内 -->
<script setup>
  import { provide, ref } from "vue";

  const location = ref("North Pole");

  function updateLocation() {
    location.value = "South Pole";
  }

  provide("location", {
    location,
    updateLocation
  });
</script>
<!-- 在注入方组件 -->
<script setup>
  import { inject } from "vue";

  const { location, updateLocation } = inject("location");
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

5. 为避免重名可以使用Symbol