[Vue] $attrs的使用场景

正常情况下，Vue推荐用props向子组件参数。但是在特定场景下，使用$attrs 会更方便。

考虑最简单的场景，一个滑动输入框组件定义如下：

<template>  <input     class="slider__input"    type="range"     :value="modelValue"    @input="$emit('update:modelValue', $event.target.value)" /></template><script>export default {  name: "Slider",  props: {    modelValue: [Number, String]  }};</script>

正常调用它的方式为：

 <Slider v-model="value" />

但实际上，我们可以为其额外添加少量属性

    <Slider v-model="value"        min="0"      max="50"      class="blue_slider"      id="special_id"      data-cy="cypress-slider"      @keydown="() => true"      aria-label="Example slider"/>

这些属性没有在子组件的props 中，会以原生方式出现在input标签中：

属性绑定成功，注意在Vue 3.x里，class也能正常传递

因为这里根元素只有一个<input>，不需要$attrs 登场，就能完成属性的传递。

假如input不是根元素呢？

例如父组件不变，子组件换成这样定义：

<template>  <h1>{{ title }}</h1>  <input     type="range"     :value="modelValue"    @input="$emit('update:modelValue', $event.target.value)"    class="slider__input" />  <div>Value: {{ value }}</div></template>

渲染出来的dom如下：

不是根节点，属性无法绑定

可以看出，我们额外添加的属性并没有传递给input.

好了，轮到$attrs 登场了

只要给input添加一个指令 v-bind="$attrs"

<template>  <h1>{{ title }}</h1>  <input     type="range"     **v-bind="$attrs"**    :value="modelValue"    @input="$emit('update:modelValue', $event.target.value)"    class="slider__input" />  <div>Value: {{ value }}</div></template>    

利用`v-bind=”$attrs”` 实现属性绑定

可以看出，额外添加的属性，又成功的传递给了input标签。

总结

1. Vue 3.x中所有的属性，包括class/style都可以通过$attrs 传递，这个与Vue2.x不同.

2. v-bind="$attrs" 指令，能够指定dom节点，完成属性绑定。

3. $attrs 只适合传递原生属性/事件，其它的属性还是老老实实用props和events传递吧。