非 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="请输入用户名" />