Vue中的爷孙传值$attrs 和利用$listeners 孙爷传值

$attrs作为数据对象，$listeners作为函数方法对象，两者都是vue的实例属性。$attrs和$listeners主要作为多重组件爷孙之间数据通信和方法调用。

grandFather.vue

<template>
    <div>
        <father :age="ag" :number="nu" @onChange="onChange"></father>
    </div>
</template>
<script>
import father from './father'
    export default {
        components:{
            father
        },
         data() {
            return {
                ag: 12,
                nu:111,
            }
        },
        methods: {
            onChange(ha){
                console.log(ha)//'传给爷爷的'
            }
        },
    }
</script>

father.vue

<template>
  <div>
    <son v-bind="$attrs" v-on='$listeners'></son>
  </div>
</template>
<script>
import son from './son.vue'
export default {
  props: {
    value: {
      type: Number,
    },
  },
  components:{
      son
},
created(){
  console.log(this.$attrs)//age number
  console.log(this.$listeners)//onChange
}
}
</script>
<style lang="scss" scoped></style>

son.vue

<template>
    <div>
        {{age}}
    </div>
</template>
<script>
    export default {
        props:['age'],
        created(){
            console.log(this.$attrs) // 111 因为父组件共传来 age, number两个值，由于age被 props接收了，所以只有number, 
            this.$emit('onChange','传给爷爷的')
        }
    }
</script>
<style lang="scss" scoped>
</style>

总结：

（1）$attrs对应所有引用子组件时，除class、style等绑定的数据属性；

eg: <father :age="ag" :number="nu" @onChange="onChange"></father>

this.$attrs={ age:12，number:111};

（2）$listeners 对应所有引用子组件时，绑定的函数方法；

eg: <father :age="ag" :number="nu" @onChange="onChange"></father>

this.$listeners={onChange:()=>{}};

（3）多重组件之间，中间组件通过v-bind="$attrs"和v-on="$listeners "进行传递

很赞哦！ (0)