Vue属性透传（Attributes）

一、透传的定义

父组件会给子组件进行属性传递，部分属性又会自动传给子组件的子组件。

二、如何传递

对于一个组件来说，透传进来属性会默认变成根元素的属性。

// MyButton组件
<div>
    <button></button>
</div>

// 使用MyButton组件
<div>
    <MyButton class='myBtn' />
</div>

// 渲染后的MyButton组件
<div class='myBtn'>
    <button></button>
</div>

这个透传属性传法和props一样（还有emit传出的方法），但是他们之间有区别，对于那些在props中定义的属性，不会透传到子组件的根元素中，可以理解为被消费了。

// MyButton组件
<div>
    <button></button>
</div>
<script>
    export default {
        props: ['name']
    }
</script>

// 使用MyButton组件
<div>
    <MyButton name="xxx"/>
<div>

// name被消费，不会透传到MyButton的根组件上

若不想子组件自动进行透传，可以通过选项配置inheritAttrs: false进行禁止，禁止后可以通过$attrs对传入的属性直接访问。

// MyButton组件
<div>
    <button>{{ $attrs.text }}</button>
</div>
<script>
    export default {
        props: ['name'],
        inheritAttrs: false
    }
</script>

// 使用MyButton组件
<div>
    <MyButton name="xxx" text="bbb"/>
<div>

若子组件有多个根节点，需要显示的将$attrs绑定到某一个元素，否则会警告。

// 根节点1
<header>---</header>

// 根节点2
<main v-bind="$attrs">---</main>

// 根节点3
<footer>---</footer>

// 如果v-bind没有指定具体属性名，会将对象中属性全部转换成该组件的属性