vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)

$attrs和 $listeners如何使用呢？

$attrs是用来将数据从爷组件传递给孙组件的。(理解为之前的父传子)
$listeners是用来从孙组件中触发爷组件中事件的。(理解为之前的子传父)

$attrs的使用：

孙子组件正常写功能代码，正常定义props 来接收数据，这里假设props里面定义了一个字符串类型的name。
父组件使用 $attrs （v-bind=" $attrs"）
爷爷组件正常以前父传子的写法（:name=“name”）
(这里需要注意的是父组件中不需要接收props，只要在孙组件中接收就可以。)

<!-- 在爷爷组件中（index.vue） -->
<Father :name="name"/>
<!-- 在父组件中（father.vue） -->
<Son v-bind="$attrs"/>
<!-- 在孙子组件中（son.vue） -->
<template><div class="home">{{name}}</div>
</template>
<script>
export default {data() {return {};},props: {name: {default: String},},
};
</script>

$listeners的使用：

在爷组件(index.vue)中，绑定事件。
在父组件中，也是类似绑定事件，但是这里绑定的不是具体的事件，而是v-on=“$listeners”。
在孙组件中，需要的时候触发( $emit)这个事件即可。

<!-- 在爷爷组件中（index.vue） -->
<Father :name="name" :newHome.sync="newHome" />
<!-- 在父组件中（father.vue） -->
<BaseButton  v-on="$listeners"></BaseButton>
<!-- 在孙子组件中（son.vue） -->
<template><div class="base_button"><el-button @click="update">我是孙子组件</el-button></div>
</template><script>
export default {methods: {update() {const newHome = {name: "new",};this.$emit("update:newHome", newHome);},},
};
</script>

总结：

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

vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)相关推荐

Vue 组件传值通信、父子组件、爷孙组件传值、方法调用
组件传:vue子组件改变父组件中data的值_mldwyy的博客-CSDN博客_子组件修改父组件data 参考 https://www.cnblogs.com/lianxisheng/p/109073 ...
vue学习（1）vue3/2下的父子/爷孙组件间方法调用
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了) vue2中的写法爷组件控制孙组件的锚点跳转(父子组件间方法调用类似) // 孙组件 <tem ...
vue3组件之间通信(三)——爷孙组件传递属性和方法
文章目录 1:setup函数传递属性和方法($attrs) 1:代码 2:主要代码和详细讲解 3:注意点 2:script setup 语法糖传递属性和方法 1:代码 2:主要代码和详细讲解 3:注意 ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
vue中的v-model原理，与组件自定义v-model
VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
vue3跨组件传值（爷孙组件传值）
在父组件中通过provide来传递 provide('data':要传递的值) 在下面的子组件或孙组件中通过 let ecorData: any = inject("data"); ...
实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用
实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用 npm地址--https://www.npmjs.com/package/@xunlei/vue-context ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...

vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)

$attrs和 $listeners如何使用呢？

$attrs的使用：

$listeners的使用：

总结：

vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)相关推荐

最新文章

热门文章