VUE祖孙组件之间的传递

说明：vue祖孙组件就是祖宗组件包含父组件，父组件包含孙组件，那如何把祖宗组件的值直接传递给孙子组件呢？

知识点

1.在祖宗组件使用provide对象，声明参数并赋值

2.在孙子组件使用inject对象，接收参数。并在页面显示值

代码示例

祖宗组件

<template>
  <div>
    <Fu></Fu>
  </div>
</template>

<script>
import Fu from "./Fu";
export default {
  name: "Zu",
  components: {Fu},
  /*对象式写法，缺点，无法传递data中的值*/
  /*provide:{
    name: '张三',
    age: 23
  },*/
  /*函数式写法，可以满足data中的值传递给孙子级*/
  provide(){
    return{
      name: '张三',
      age: 23,
      height: this.height
    }
  },
  data(){
    return{
      height: 170
    }
  }
}
</script>
<style scoped>
</style>

父级组件

<template>
  <div>
    <Sun></Sun>
  </div>
</template>

<script>
import Sun from "./Sun";
export default {
  name: "Fu",
  components: {Sun}
}
</script>
<style scoped>
</style>

孙级组件

<template>
  <div>
    <h2>姓名：{{name}}，年龄：{{age}}，身高：{{height}}</h2>
  </div>
</template>

<script>
export default {
  name: "Sun",
  inject:['name','age','height']
}
</script>
<style scoped>
</style>

结果显示