vue 2父组件向子组件方向的数据、方法单向$attrs/$listeners的用法-个人笔记

名称	用法
$attrs	向子组件传递数据（传递的数据 - props中的数据）
$listeners	向子组件传递方法
共同点	只读

• 父组件

<template>
    <div>
        parent:
        <son :clearable="clearableValue" @clickEvent = clickEvent :sex = "sex" :name="name"  @click="clickEvent"/>
    </div>
</template>

<script>
export default {
    name: 'parent',
    inheritAttrs: false,
    props: {
        msg: String
    },
    data() {
        return {
            clearableValue: '111',
            sex: 'nv',
            name: 'yuhang',
        };
    },
    components: {
        son: () => import(/* webpackChunkName: 'son' */ './son.vue'),
    },
    created() {
        console.log(this.$attrs);
        console.log('listeners', this.$listeners);
    },
    methods: {
        clickEvent() {
            console.log('hjdojdoa');
        },
    },
}
</script>

• 子组件

<template>
    <div>
        son:
        <sunzi v-bind="$attrs" language='english' v-on="$listeners"></sunzi>
    </div>
</template>

<script>
export default {
    name: 'son',
    inheritAttrs: false,
    props: {
        clearable: String
    },
    components: {
        sunzi: () => import(/* webpackChunkName: 'sunzi' */ './sunzi.vue'),
    },
    created() {
        console.log(this.$attrs);
        console.log('listeners', this.$listeners);
    },
}
</script>

• 子组件

<template>
    <div>
        sunzi:
    </div>
</template>

<script>
export default {
    name: 'sunzi',
    
    created() {
        console.log('sun----------------', this.$attrs);
        console.log('listeners', this.$listeners);
    },
}
</script>

注意事项

• inheritAttrs: false, 属性默认为true，不设为false的话，为在dom节点上显示传递的内容
• 父组件向 孙组件（多级嵌套组件-跨级组件）传递 时，保证传递链上v-bind="$attrs" v-on="$listeners" 的存在
  

以上父子孙组件的打印为：

可见：信息来源者（父组件）是没有$attrs信息和$listeners信息的