对于这种情况,我们可以使用一对 provide 和 inject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。
方式一:只能传递简单的静态内容
//注册父组件
const app = Vue.createApp({
data() {
return {
myText: "",
};
},
provide: {
user: "John Doe",
},
});
//注册子组件
app.component("todo-list-statistics", {
inject: ["user"],//接收参数
template: "<div>todo-list-statistics</div>",
created() {
console.log(this.user); // > 注入 property: John Doe
},
});
方式二:要访问组件实例 property,我们需要将 provide 转换为返回对象的函数
//注册父组件
const app = Vue.createApp({
data() {
return {
myText: "123123",
};
},
provide() {
return {
myText: this.myText,
};
},
});
//注册子组件
app.component("todo-list-statistics", {
inject: ["myText"],//接收参数
template: "<div>todo-list-statistics</div>",
created() {
console.log(this.myText);
},
});