Vue $listeners 和 $attrs

$listeners

vue的事件回传，对于vue父组件的内部的子组件的层级嵌套，通过绑定v-on='$listeners'监听最底层子组件的传来的值，类似 子1-1-1 =>子1-1=>子1=>父组件

<!--父组件-->
<template>
    <div class="father-page">
        <div>这是父组件</div>
        <child-1 @child2Info="getInfo"></child-1>
    </div>
</template>

<script>
import child1 from './child1'
    export default {
        name: 'Father',
        components:{child1},
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {
            getInfo:function(data){
                console.log(data)
                //这是子组件1-1-1发送的信息
            }
        }
    }
</script>

<!--子组件1-->
<template>
    <div class="child1-page">
        <div>这是子组件-1</div>
        <child-2 v-on="$listeners"></child-2>
    </div>
</template>

<script>
import child2 from "./child2"
    export default {
        name: 'Child1',
        components:{child2},
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {}
    }
</script>

<!--子组件1-1-->
<template>
    <div class="child2-page">
        <div>这是子组件-1-1</div>
        <child-3 v-on="$listeners"></child-3>
    </div>
</template>

<script>
import child3 from './child3'
    export default {
        name: 'Child2',
        components:{
            "child-3":child3
        },
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() {
            
         },
        methods: {}
    }
</script>

<!--子组件1-1-1-->
<template>
  <div>这是子组件1-1-1</div>
</template>
<script>
export default {
  mounted: function() {
      this.$emit("child2Info","这是子组件1-1-1发送的信息")
  }
};
</script>

$attr

父组件向子组件传递信息，包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用

<!--父组件-->
<template>
    <div class="father-page">
        <div>这是父组件</div>
        <child-1 :name="测试名字" data-id="1"></child-1>
    </div>
</template>

<script>
import child1 from './child1'
    export default {
        name: 'Father',
        components:{child1},
        props: {},
        data() {
            return {}
        },
        created() { },
        mounted() { },
        methods: {
            
        }
    }
</script>

<!--子组件1-->
<template>
    <div class="child1-page">
        <div>这是子组件-1</div>
        <child-2 v-bind="$attrs"></child-2>
    </div>
</template>

<script>
import child2 from "./child2"
    export default {
        name: 'Child1',
        components:{child2},
        props: {},
        data() {
            return {}
        },
        created() { 
           //父组件的次级组件可以直接获取，不需要绑定v-bind="$attrs"
            console.log(this.$attrs)  //{name:'测试名字',data-id:1}
        }
    }
</script>

<!--子组件1-1-->
<template>
    <div class="child1-page">
        <div>这是子组件1-1</div>
    </div>
</template>

<script>
    export default {
        name: 'Child2',
        props: {},
        data() {
            return {}
        },
        created() { 
            console.log(this.$attrs)  //{name:'测试名字',data-id:1}
        }
    }
</script>