vm.$attts的用法

1、父组件向子组件传值，子组件没有在props中声明时的属性存在$attrs对象中。

// 父组件
<template>
    <div>
        ParentPage
        <Child msg="hello child page" />
    </div>
</template>

<script>
    import Child from './Child'
    export default {
        name: 'ParentPage',
        components: {
            Child
        }
    }
</script>

// 子组件
<template>
    <div>
        ChildPage：{{$attrs.msg}}
    </div>
</template>

<script>
    export default {
        name: 'ChildPage',
        //   props: {
        //     msg: {
        //       type: String
        //     }
        //   }
    }
</script>

2、在多层组件引用时，被引用组件又存在多个props属性，向下传递要在子子组件重复的写props属性，繁复又冗长。可用在子组件使用v-bind="$attrs"，子子组件就可以在$attrs中获取相应的属性。

// 父组件
<template>
    <div>
        ParentPage
        <Child msg="hello {0} page" />
    </div>
</template>

<script>
    import Child from './Child'
    export default {
        name: 'ParentPage',

        components: {
            Child
        }
    }
</script>

<style>
</style>

// 子组件
<template>
    <div>
        ChildPage：{{$attrs.msg.replace(/\{0\}/, 'Child')}}
        <SubChild
            v-bind="$attrs" />
    </div>
</template>

<script>
    import SubChild from './SubChild.vue'
    export default {
        name: 'ChildPage',
        //   props: {
        //     msg: {
        //       type: String
        //     }
        //   },
        components: {
            SubChild
        },
        data () {
            return {}
        }
    }
</script>

// 子子组件
<template>
    <div>
        SubChildPage：{{$attrs.msg.replace(/\{0\}/, 'SubChild')}}
    </div>
</template>

<script>
    export default {
        name: 'SubChildPage',
        //   props: {
        //     msg: {
        //       type: String
        //     }
        //   },
        data () {
            return {}
        }
    }
</script>

$attrs虽然好用，但不能滥用，以免造成props属性定义不清晰。可以用于多层组件中间部分组件传值。在必须的props属性还是不要省略的好。