非 Prop 的 Attribute

非 Prop 的 Attribute

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute 。

只有一个根元素的时候：

  1.直接写在子组件上

   

<child attribute="test"></child>


作用在子组件div上 ：

 <div attribute="test"></div>
   

  

2.   class 和 style 两个属性做合并，而 id 做替换。其实规则就是除 class 和 style 属性合并之外，其他属性做替换操作

父组件调用：
<child id="child" class="clild-class" style="background: green"></child>

子组件div：

<div id="my-child" class="base-class" style="color: red"></div>

作用效果：

 <div id="child" class="base-class clild-class" style="color: red;background: green"></div>

有多个根元素：

<input-with-tip placeholder="请输入用户名"></input-with-tip>

子组件有多个根元素

    <input type="text" />
    <p>用户名为必填项</p>

这时父组件的非prop的attribute，就会报错，在data中添加 ： inheritAttrs: false, 表示不希望组件的根元素继承 attribute，这时解决了报错



<input type="text" v-bind="$attrs"> 添加v-bind="$attrs"，input就会继承 ：
  

<input type="text" placeholder="请输入用户名" />

inheritAttrs: false 选项不会影响 style 和 class 的绑定