vue provider inject

// main.js
import Vue from 'vue';
import App from './App.vue';

// 创建一个 Vue 实例并使用 provide 选项提供数据
new Vue({
  el: '#app',
  provide() {
    return {
      message: 'Hello from parent!'
    };
  },
  render: h => h(App)
});

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  inject: ['message'] // 使用 inject 选项注入来自父组件的数据
};
</script>

解释说明：

1. main.js:

   • 在创建 Vue 实例时，通过 provide 选项提供了一个名为 message 的属性，其值为 'Hello from parent!'。

2. ParentComponent.vue:

   • 这是一个普通的父组件，它包含了一个子组件 ChildComponent。

3. ChildComponent.vue:

   • 通过 inject 选项注入了父组件提供的 message 属性，并在模板中使用它。

这种方式允许你在组件树中的任何层级传递数据，而不需要通过 props 逐层传递。