vue父子组件之间的通讯,vue父子组件通信方式
所谓孙组件，也就是三层嵌套的组件，下面文章主要介绍VUE如何优雅地实现孙组件之间的数据通信的相关信息，有需要的可以参考一下。
目录
如何使用$ attrs和$listeners？$attrs的使用：$listeners的使用：总结：在开发的过程中，我遇到了这样的场景，需要在父组件中请求数据，请求的数据需要在子组件中使用。
孙组件是这样的：我有一个根组件index.vue，根组件里有一个父组件Father/
看到这一幕，vuex和eventBus都有些大材小用了。然后我用props把数据传给Father/，再通过props把这个值传给Son/。不过，好像又觉得有点低了。有没有更好的办法？有！那就是$attrs和$listeners。
$attrs和$listeners如何使用呢？
$attrs用于将数据从父组件传输到子组件。$listeners用于触发孙组件中的事件。
$attrs的使用：
在父组件(index.vue)中，类似于props，要传递的值被绑定到父组件。在父组件中，值也像props一样被传递，但是这里传递的不是值，而是$attrs。在子组件中，接收props，以便可以在子组件中使用这些数据。(需要注意的是，不需要在父组件中领取道具，只需要在子组件中领取即可。)
然后编码：
//index.vue:
父亲：homeInfo=homeInfo/
//Father.vue:
Son v-bind=$attrs/
//son.vue:
模板
div class=home
{{homeInfo.name}}
/div
/模板
脚本
导出默认值{
姓名：儿子，
data() {
return { }；
},
道具：{
homeInfo: {
默认：对象，
默认值：()={}，
},
},
};
/脚本
$listeners的使用：
在组件(index.vue)中，绑定事件。在父组件中，它类似于绑定事件，但不是特定事件，而是v-on=$listeners 。在子组件中，只需$在必要时发出此事件。然后编码：
//index.vue:
父亲：homeInfo= homeInfo @ update= update /
//Father.vue:
son v-bind= $ attrs v-on= $ listeners /
//son.vue:
模板
div class=home @click=update
{{homeInfo.name}}
/div
/模板
脚本
导出默认值{
姓名：儿子，
data() {
return { }；
},
道具：{
homeInfo: {
默认：对象，
默认值：()={}，
},
},
方法：{
update() {
const newHome={
名称：“新”
}
这个。$emit(update ，newHome)
}
}
};
/脚本
总结：
实际上，$attrs和$listeners相当于一个transit，主要用在父亲组件中。叶和孙的组件可以像以前一样使用！
这就是本文关于如何优雅地实现VUE中祖父和孙子组件之间的数据通信的内容。有关VUE的祖父和孙子组件之间的数据通信的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。