1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: "bar",
},
// ...
};
// 子组件注入 'foo'
var Child = {
inject: ["foo"],
created() {
console.log(this.foo); // => "bar"
},
// ...
};
Vue3: Provide / inject | Vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const app = Vue.createApp({});
app.component("todo-list", {
data() {
return {
todos: ["Feed a cat", "Buy tickets"],
};
},
provide: {
user: "John Doe",
},
template: `
<div>
{{ todos.length }}
<!-- rest of the template -->
</div>
`,
});
app.component("todo-list-statistics", {
inject: ["user"],
created() {
console.log(`Injected property: ${this.user}`); // > Injected property: John Doe
},
});