爷组件跳过父组件给孙组件传值（vue，父组件中也必须要搭建桥梁）

一个没有灵魂的女程序媛

于 2022-05-27 18:09:27 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45502106/article/details/125008214

本文介绍了一种Vue.js应用中实现祖父组件到孙组件及反向传值的方法。通过attrs和listeners，详细展示了如何在不同层级的组件间传递数据与事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一种attrs和listens传值(各页面引入和注册组件不要忘记了)

1.1这是爷页面组件

<template>
<div>
 // 引入父组件，dialog-mutile是父组件，traderNameInfo是给孙组件传的值
 <dialog-mutile
      v-if="dialogMulti"
      :tradernameinfoobj="traderNameInfo
      @change="changeHandle"
    />
   </div>
   </template>
   <script>
   changeHandle(val){
   // val 为孙组件传来的值
   }
   </script>

1.2 这是父组件（父组件中无需再在props中重新写要传的变量）

<div>
// 这是孙组件，v-bind="$attrs"搭建桥梁，孙组件直接使用$attrs即可，v-on="$listeners" 是孙组件向父组件传值时使用
		<traderInfo v-bind="$attrs" v-on="$listeners" />
	</div>

1.3 这是孙组件

<template>
<div>
// tradernameinfoobj是爷组件传参赋给的名字
{{$attrs.tradernameinfoobj.aaa}}
<el-button @click="btnHandle">
按钮</el-button>
</div>
</template>
<script>
methods:{
btnHandle(){
// '1111111'是传给爷组件的值,爷组件可以接收
this.$emit('change','1111111')
}
}
</script>