1// 父级组件提供 'foo'
 2var Provider = {
 3  provide: {
 4    foo: "bar",
 5  },
 6  // ...
 7};
 8
 9// 子组件注入 'foo'
10var Child = {
11  inject: ["foo"],
12  created() {
13    console.log(this.foo); // => "bar"
14  },
15  // ...
16};

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