Vue3 inject provide 使用示例 - 父子组件数据传递

下面是一个使用 Vue3 的 inject 和 provide 的例子：

// 父组件提供一个值
const App = {
  provide() {
    return {
      message: 'Hello World',
    }
  },
  template: `
    <div>
      <child-component></child-component>
    </div>
  `,
}

// 子组件使用提供的值
const ChildComponent = {
  inject: ['message'], // 在子组件中注入父组件提供的值
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `,
}

// 在 Vue 实例中渲染父组件
const vm = Vue.createApp({
  components: {
    'child-component': ChildComponent,
  },
  template: `
    <div>
      <app></app>
    </div>
  `,
}).mount('#app')

在这个例子中，父组件 App 使用 provide 来提供一个值 message，然后在子组件 ChildComponent 中使用 inject 来注入这个值。子组件可以直接使用 message 来访问父组件提供的值。