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来访问父组件提供的值