VUE3 父组件向其依赖的深层子组件传递内容 示例

对于这种情况，我们可以使用一对 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);
        },
      });