vue祖孙组件之间的数据传递

最新推荐文章于 2025-07-15 09:08:00 发布

原创最新推荐文章于 2025-07-15 09:08:00 发布 · 1.3w 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#$attrs #$listenters #祖孙组件数据传递 #vu

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用$attrs和$listeners实现Vue2.4版本以上组件的祖孙间数据与事件传递，通过具体代码示例展示了父组件、子组件及孙组件的写法。

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

**解决的问题：**

使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。

**注意：**

本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的

**解决方案：**

**首先创建父组件：** 父组件用于动态数据的绑定与事件的定义

<template>

    <div>
           <!--这里 :one和:two是向后代组件传递数据-->
        <child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1>
    </div>
</template>

<script>

import Child1 from './Child.vue';

export default {

    data () {

        return {

          child1:'lihua',

          child2:'lignag',
          parent: 0

        };

    },

    components: {

      'child1':Child1  //引入子组件

    },

    methods: {

        onTest1 () {

            console.log('child')

        },

        onTest2 (val) {

         this.parent = val

        }

    }

}

</script>

子组件的写法：通过设置v-bind="$attrs" 和v-on="$listeners"来充当中间人，

<template>
    <div class="child-1">
       <p>$attrs:{{$attrs['two']}}</p>   
       <hr>
        <!-- 子组件中通过v-bind='$attrs'接受数据，通过$listeners接收事件 -->
        <child2 v-bind="$attrs" v-on="$listeners"></child2>
    </div>
</template>
<script>
import child2 from './Child2.vue';
export default {
    props: ['one','two'],  //可写可不写
    data () {
        return {
            
        }
    },
    inheritAttrs: false,  //父组件传递动态数据后，子组件的默认行为
    components: {
        child2    
    },
    mounted () {
        this.$emit('test1')  //触发父组件方法的一种方式
        this.$listeners.test2(123)  //触发父组件方法的另一种方式
    }
}
</script>

孙组件写法：通过props或者$attrs和$listeners来获取父组件数据和事件。

<template>
    <div class="child-2">
        <p>props:{{one}}</p>
        <p>props:{{two}}</p>
        <p>$attrs: {{$attrs['one']}}</p>  
        <hr>
    </div>
</template>
<script>
export default {
    props:['one','two'],  //接收父组件传递的数据，可以不写，通过$attrs来获取
    data(){
        return {};
    },
    inheritAttrs: false,  //默认行为需要取消
    mounted(){
        this.$emit('test1') //触发父组件方法的一种方式
        this.$listeners.test1(123)//触发父组件方法的另一种方式
    }
}
</script>

另：inheritAttrs的作用:

先注意一点：使用$attrs时inhertAttrs设置为false.

当inheritAttrs设置为true时，父元素动态绑定组件的数据，子组件如果没有通过props接收的话，该属性就会附加于子组件的根元素上。什么意思看代码

//父组件

<child :one="help"></child>


data(){
 return {
    help:123 
   }
 }


//子组件


<template>
  <div>
    <h1>作为子组件的我并没有设置props来接收父组件的one属性。</h1>
  </div>
</template>





//父组件解析出来就是这样

<div one="123">
 <h1>作为子组件的我并没有设置props来接收父组件的one属性。</h1>
</div>

所以呢我们通过v-bind="$attrs"来指定父组件数据的绑定位置，同时设置inheritAttrs为false来取消默认行为