provide
provide 选项允许一个祖先组件提供数据，该数据可以被该组件的所有后代组件访问。通常，provide 选项在组件的配置对象中定义，如下所示：
const app = Vue.createApp({
provide() {
return {
message: '这是来自祖先组件的消息'
};
},
// 其他组件选项...
});
在这个例子中，祖先组件通过 provide 提供了一个名为 message 的数据，它的值是字符串 "这是来自祖先组件的消息"。
inject
inject 选项用于在后代组件中注入祖先组件提供的数据。在后代组件的配置对象中，通过 inject 选项声明你想要注入的属性名：
const app = Vue.createApp({
// ...
});
app.component('child-component', {
inject: ['message'], // 注入名为 'message' 的数据
template: '<p>{{ message }}</p>',
// 其他组件选项...
});
在这个例子中，child-component 组件通过 inject 选项声明了对 message 数据的注入。然后，可以在组件的模板中使用 {{ message }} 来访问该数据。
需要注意的是，inject 选项是一个数组，数组的每一项都是要注入的属性名。在模板中使用注入的属性时，Vue 会自动创建响应式绑定。
使用 provide 和 inject 可以方便地在组件之间进行数据传递，特别是在跨越多层嵌套的组件中。这种模式可以帮助你更好地组织和解耦组件。
转载请注明出处：http://www.zyzy.cn/article/detail/497/Vue 3.0