Vue $attrs / $listeners

$attrs

把父组件中非props属性绑定到内部组件

$listeners

把父组件中的DOM对象的原生事件绑定到内部组件

1.父组件传给自定义子组件的属性,如果没有prop接收,会自动设置到子组件内部的最外层标签上, 如果是 class 或者 style 的话,会合并最外层标签的 class 和 style

<!-- 父组件 -->
<demo class="parent-class" required placeholder="Hello vue"></demo>

<!-- 子组件 -->
<div>
 <input type="text" class="form-control" />
</div>

<!-- 不使用 $attrs 和 inheritAttrs=false -->
<!-- 把非props的属性添加到最外层的元素上 -->
<div required="required" placeholder="Hello vue" class="parent-class">
 <input type="text" class="form-control">
</div>

2.如果子组件不想继承父组件传入的非props属性,可以使用 inheritAttrs 禁用继承, 然后通过 v-bind="$attrs" 把外部传入的非props属性添加到希望的标签上. 但是这不会改变 class和style(还是会把class和style添加到最外层的元素上)

<!-- 子组件 -->
<div>
 <input type="text" class="form-control" v-bind="$attrs" />
</div>
<!-- 使用$attrs 和 inheritAttrs=false -->
<!-- 除了 class 和 style 属性都被加在指定的元素上 -->
<div class="parent-class">
 <input type="text" required="required" placeholder="Hello vue" class="form-control">
</div>

3. 给子组件绑定事件

<!-- 父组件 -->
<demo class="parent-class" required placeholder="Hello vue" @focus="onFocus" @input="onInput"></demo>

<!-- 子组件 -->
<div>
    <input
      type="text"
      class="form-control"
      v-bind="$attrs"
      @input="$emit('input',$event)"
      @focus="$emit('focus',$event)"
    />
  </div>

4. 通过$listeners简化事件的注册(效果同3一致)

<!-- 父组件 -->
<demo class="parent-class" required placeholder="Hello vue" @focus="onFocus" @input="onInput"></demo>

<!-- 子组件 -->
<input type="text" class="form-control" v-bind="$attrs" v-on="$listeners" />