VUE中优雅的实现爷孙组件的数据通信

一起养成写作习惯!这是我参与「日新计划 4 月更文挑战」的第15天,点击查看活动详情。

  • 在开发的过程中遇到这么个场景,我需要在爷组件中请求数据,请求到的数据呢需要在孙组件中使用。

  • 爷孙组件是这样的:我有一个根组件index.vue,根组件中有一个父亲组件<Father/>,在父亲组件中又有一个子组件,我们叫他孙组件<Son/>

  • 看到这个场景,vuex、eventBus是有些大材小用了,然后我就用了props,将数据传递给<Father/>,又将这个值通过props传给<Son/>。但是这么传递似乎又感觉有些low了,那有没有更好的办法呢?确实有!那就是$attrs$listeners

$attrs$listeners如何使用呢?

  • $attrs是用来将数据从爷组件传递给孙组件的。
  • $listeners是用来从孙组件中触发爷组件中事件的。

$attrs的使用:

  1. 在爷组件(index.vue)中,类似props传值,将需要传递的值绑定在父组件上。
  2. 在父组件中,也是类似props传值,但是这里传递的就不是值了,而是$attrs。
  3. 在孙组件中,接收props,这样就可以在孙组件中使用这个数据了。

(需要注意的是父组件中不需要接收props,只要在孙组件中接收就可以。)

然后上代码:

//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>

$listeners的使用:

  1. 在爷组件(index.vue)中,绑定事件。
  2. 在父组件中,也是类似绑定事件,但是这里绑定的不是具体的事件,而是v-on="$listeners"
  3. 在孙组件中,需要的时候触发($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>

总结:

其实$attrs$listeners相当于是一个中转,主要用在父亲组件上。爷组件和孙组件保持以前的使用即可!

以上就是我在开发过程中遇到问题总结,如果可以帮助到小伙伴们,希望可以辛苦帮忙点个赞!更是我以后更新的动力!

发表评论

提供最优质的资源集合

立即查看 了解详情