provide/inject

<template>
  <div>
    <h3>这里是父组件</h3>

    {{fatherData}}
    <hr />
    <hr />
    <son></son>
  </div>
</template>

<script>
import son from "@/test/son";
export default {
  name: "father",
  provide: {
    // fatherData: this.fatherData,

      fatherData: "父组件的数据"
  },
  components: {
    son
  },
  data() {
    return {
      sonData: "",
      msg: "hello world",
      // fatherData: "父组件的数据",
    fatherData: this.fatherData,

    };
  },
  methods: {
    getchild() {}
  }
};
</script>

<style scoped>
</style>

<template>
  <div>
    <h3>这里是子组件</h3>
    <div>从father组件传过来的数据</div>
    {{fatherData}}
    <hr />
    <hr />
    <grandson></grandson>
  </div>
</template>

<script>
import grandson from "@/test/grandson";
export default {
  name: "son",
  inject: ["fatherData"],
  components: {
    grandson
  },
  data() {
    return {
      sonData: ["苹果", "香蕉", "句子"],
      fatherData: this.fatherData,
    };
  }
};
</script>

<style scoped>
</style>

<template>
  <div>
    <h3>这里是孙子组件</h3>
    <div>从father组件传过来的数据</div>
    {{fatherData}}
  </div>
</template>

<script>
export default {
  name: "son",
  inject: ["fatherData"],
  components: {},
  data() {
    return {
      grandsonData: ["乌龟", "兔子", "老鹰"],
      fatherData: this.fatherData,
    };
  },
  methods: {
    getfather() {
      
    }
  }
};
</script>

<style scoped>
</style>