vue前端开发自学,祖孙多层级组件嵌套关系数据传输

vue前端开发自学,祖孙多层级组件嵌套关系数据传输！官方提供了一个解决方案，就是，在根组件内使用provide,哪个子孙组件想调用这个数据，就可以inject接收就行了。虽然是方便了，但是这个有点要求，就是只能自上而下的传递。不能反过来（不能子孙给根节点！）

<template>
  <h3>组件之间，层级嵌套数据透传练习</h3>
  <Parent />
</template>
<script>
import Parent from './components/Parent.vue';
  export default{
    components:{
      Parent
    },
    data(){
      return{
        srcinfo2:"我是根节点数据"
      }
    },
    provide(){
      //使用函数的形式，可以访问到this对象
      return{
        srcinfo:this.srcinfo2
      }
    }
  }
</script>

如图，根组件内，我们使用了函数的样式，调用函数样式的好处！是可以让我们访问到当前页面的动态数据。

<template>
    <h3>Parent</h3>
    <p>{{ msg }}</p>
    <Child />
</template>
<script>
    import Child from './Child.vue';
    export default{
        components:{
            Child
        },
        data(){
            return {
                msg:this.srcinfo
            }
        },
        inject:["srcinfo"],
        
    }
</script>

parent.VUE组件内的代码展示。

<template>
    <h3>Child</h3>
    <p>{{ msg }}</p>
</template>
<script>
    export default{
        inject:["srcinfo"],
        data(){
            return {
                msg:this.srcinfo
            }
        }
    }
</script>

child.vue组件内代码展示。

下面看看实际的浏览器效果。

如图，可以看见，无论是父节点，还是子孙节点，都是可以拿到根节点定义的数据的。