vue inject

// 使用 Vue 3 的 inject 功能

// 在提供者组件中 (例如父组件)
<template>
  <div>
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent component!');

    // 提供 message 给子组件
    provide('message', message);

    return {
      message
    };
  }
};
</script>

// 在消费者组件中 (例如子组件)
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    // 注入来自父组件的 message
    const message = inject('message');

    return {
      message
    };
  }
};
</script>

解释说明：

1. provide：在父组件中使用 provide 函数来提供数据或功能。这里我们将一个响应式的 message 提供给子组件。
2. inject：在子组件中使用 inject 函数来接收父组件提供的数据或功能。通过 inject('message')，子组件可以访问到父组件提供的 message。

这种方式使得父组件可以向其所有的子孙组件传递数据，而不需要通过层层传递 props。