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组件内代码展示。

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

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