Vue 使用$attrs给子组件的元素添加属性

使用$attrs给子组件的元素添加属性

使用场景：

给子组件传参，但是子组件并没有相应prop定义

出现的问题：

这些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>

禁用 Attribute 继承

如果你不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false。

子节点添加属性

<ValidateInput type="password" placeholder="请输入密码"></ValidateInput>

1. 禁用继承

   inheritAttrs:false,
   

2. 给子节点 绑定$attrs

   <template>
       <div>
           <input 
               v-bind="$attrs"
               :value="inputRef.val"
               @blur="validateInput"
               @click="updateValue"
           >
           <span v-if="inputRef.error">{{inputRef.message}}</span>
       </div>
   </template>
   

3. 那么子节点就有对应的属性了

   <input type="text" placeholder="请输入邮箱">