脚本宝典收集整理的这篇文章主要介绍了vue 实现爷孙组件的数据通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
//index.vue: <Father :homeInfo="homeInfo"/> //Father.vue: <Son v-bind="$attrs"/> //son.vue: <template> <div class="home"> {{homeInfo.name}} </div> </template> <script> export default { name: "Son", data() { return {}; }, props: { homeInfo: { default: Object, default: () => {}, }, }, }; </script>
v-on="$listeners"。$emit)这个事件即可。//index.vue: <Father :homeInfo="homeInfo" @update="update"/> //Father.vue: <Son v-bind="$attrs" v-on="$listeners"/> //son.vue: <template> <div class="home" @click="update"> {{homeInfo.name}} </div> </template> <script> export default { name: "Son", data() { return {}; }, props: { homeInfo: { default: Object, default: () => {}, }, }, methods: { update() { const newHome = { name: 'new' } this.$emit("update", newHome) } } }; </script>
以上是脚本宝典为你收集整理的vue 实现爷孙组件的数据通信全部内容，希望文章能够帮你解决vue 实现爷孙组件的数据通信所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。