vue笔记之$attr

含义

$attr是一个对象，它包含了父组件传递给子组件，但子组件没有用props接收的数据

作用

透传属性（爷孙隔代传值）。父子传值用props，爷孙隔代传值用$attr

示例

父组件

<template>
    <child :name="name" :age="age" :infoObj="infoObj" />
</template>
<script>
    import Child from '../components/child.vue'

    export default {
        name: 'father',
        components: { Child },
        data () {
            return {
                name: 'Lily',
                age: 22,
                infoObj: {
                    from: '上海',
                    job: 'policeman',
                    hobby: ['reading', 'writing', 'skating']
                }
            }
        }
    }
</script>

子组件

<template>
    <grand-son :height="height" :weight="weight" v-bind="$attrs" />
</template>

<script>
    import GrandSon from '../components/grandSon.vue'
    export default {
        name: 'child',
        components: { GrandSon },
        props: ['name'],
        data() {
            return {
                height: '180cm',
                weight: '70kg'
            };
        },
        created() {
            console.log(this.$attrs);// age, infoObj
            // 因为父组件共传来name, age, infoObj三个值
            // 由于name被 props接收了，所以只有age, infoObj属性
        }
    }
</script>

孙组件

<template>
    <div>
        {{ $attrs }}
    <div>
</template>

<script>
    export default {
        props: ['weight'],
        created() {
            console.log(this.$attrs); // age, infoObj, height
            // 子组件又加了height和weight，由于weight被props接收了
            // 所以结果是age, infoObj, height
        }
    }
</script>