一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。
1.Attribute 继承
当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中
如下例，父组件data-status就会自动添加到子组件的单个根节点的attribute中
当然，如果子组件将dataStatus加入props，就不会出现在根节点的attribute中了
<!-- 具有非prop attribute的Date-picker组件-->
<date-picker data-status="activated"></date-picker><!-- 渲染 date-picker 组件 -->
<div class="date-picker" data-status="activated">
? <input type="datetime-local" />
</div>
同样的规则也适用于事件监听器
如下例，子组件的input修改，会触发父组件的showChange，相当于直接@input放到了Input上。
<not-props @input="showChange"></not-props>
.......
methods: {
showChange(event) {
console.log(event.target.value); // 将记录所选选项的值
},
},<template>
<input type="text" />
</template>2.?禁用 Attribute 继承和多根节点
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false
通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)
多根节点的时候，组件不具有自动 attribute fallthrough (隐式贯穿) 行为，相当于设置了inheritAttrs: false
既然$attrs保存那些属性，通过$attrs，可以将attr放到任意节点，如下例，结果为
<not-props id="notProps" title="标题"></not-props><template>
<div v-bind="$attrs">111</div>
<div :title="$attrs.title">222</div>
<div>333</div>
</template>?
?
?