master

分支 (1)

管理

管理

master

vue3.0-browser-based
/
index10.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>provide和inject，作用是进行多级组件传值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          house: "北京别墅一套",
          //只要不直接修改obj的引用就是响应的，可修改其属性值
          obj: {
            message: "sad",
          },
        };
      },
      //   provide: {
      //     newHouse: "北京200平方房子一套",
      //     message:this.message
      //   },
      provide() {
        return {
          a: this.obj,
          newHouse: "北京200平方房子一套",
        };
      },
      template: `
         <input  v-model="obj.message"/>{{obj.message}}
          <div>我有一套房子，我先传给我的儿子</div>
          <child/>
          `,
    });

    app.component("child", {
      template: `
              <div>我是子组件，我要把房子再传给我儿子。</div>
              <child-child/>
          `,
    });

    app.component("child-child", {
      inject: ["newHouse", "a"],
      template: `
              <div>我是孙子，等待接收房子______ {{newHouse}}-{{a.message}}</div>

          `,
    });
    // 我是孙子，等待接收房子______ 北京200平方房子一套-hehe
    const vm = app.mount("#app");
  </script>
</html>