VUE $attrs与$listeners

主要用于上下级（非父子）组件的传参与事件调用，VUE 2.4及以上版本使用

父组件代码：

<template>
    <div>
        <aa :username="username" :userage="userage" @ccc="aaaa"></aa>
    </div>
</template>
<script>
import  aa from "./a.vue"
export default {
    name:'collapse',
    components: {aa},
    data() {
        return {
           title: '这是头标题',
           show: true,
           username: 'gaoliang',
           userage: 34
        }
    },
    methods: {
        aaaa(){
            alert("调用了我的aaaa")
        }
    },
    mounted(){
        
    }
}
</script>
<style lang="stylus" scoped>

</style>

 

中间组件：

<template>
    <div>
        i am a 
        <ba v-bind="$attrs"  v-on="$listeners"></ba>
    </div>
</template>
<script>
import ba from './b.vue'
export default {
    name :"aa",
    components: {ba,}

}
</script>

 

下层组件

<template>
    <div>
        i am b {{ $attrs.username }}
        <button @click="cli">baclick</button>
    </div>
</template>
<script>
export default {
    name :"ba",
    methods: {
        cli() {
            console.log(this.$listeners.ccc())
        }
    }
    
}
</script>