<template>
  <div class="parent">
    <p>父组件</p>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "parent",
  // 父组件中返回要传给下级的数据
  provide() {
    console.log("执行了");
    return {
      dataInfo: this.dataInfo,
    };
  },
  props: {
    // 分页参数
    dataInfo: {
      type: Object,
      default: () => {
        console.log(this);
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>


<template>
  <div class="child">
    <p>子孙组件</p>
    <p>{{ parentInfo[prop] }}</p>
  </div>
</template>

<script>
export default {
  name: "child",
  // 子孙组件中接收祖先组件中传递下来的数据
  inject: ["dataInfo"],
  props: ["prop"],
  data() {
    console.log("执行了");
    return {
      parentInfo: this.dataInfo,
    };
  },
};
</script>


<template>
  <div>
    <parent :dataInfo="obj">
      <child prop="name"></child>
    </parent>
  </div>
</template>
<script>
import parent from "./parent";
import child from "./child";
export default {
  components: { parent, child },
  data() {
    return {
      obj: {
        name: "呵呵",
        age: "18",
      },
    };
  },
};
</script>
最后修改：2022 年 06 月 10 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏