Vue$attrs详解

发布时间：2023-05-19

一、Vue$attrs是什么

Vue$attrs是Vue.js提供的一个属性，它包含了父组件中非prop属性的集合对象。这个属性为我们提供了一个方便的方式来扩展子组件的props选项。与之对应的是Vue$listeners，该属性可以监听子组件的所有事件并将它们绑定到根元素上。

二、Vue$attrs的作用

很多情况下，我们在编写组件的时候需要定义大量的props属性。但是，有时候我们不得不将某些属性传递到自定义组件中，即使这些属性在组件内部并未使用。这就会使得我们需要处理大量的props语句，这样会加大代码的复杂度。那么Vue$attrs则提供了一种极为方便的方式来解决这个问题，它会将父组件中非prop的属性作为组件的attrs对象传递给子组件，并且这个对象中的属性都会自动行式转换为字符串键。

三、Vue$attrs的使用方式

Vue$attrs的使用方式非常简单，只需要在子组件中添加一个接收attrs参数的props即可实现其实用。示例如下：

Vue.component('comp', {
  props: ['propA', 'propB', 'propC'],
  template: `
    <div>
      <p>{{ propA }}</p>
      <p>{{ propB }}</p>
      <p>{{ propC }}</p>
      <ul>
        <li v-for="(value, name) in $attrs" :key="name">{{ name }}: {{ value }}</li>
      </ul>
    </div>
  `
})

此时，我们可以在父组件中通过使用“v-bind”来将非prop类型的属性传递到子组件中：

<comp v-bind:propa="propA" v-bind:propb="propB" data1="value1" data2="value2" data3="value3"></comp>

然后我们就可以在子组件的props选项中接收到propA、propB两个属性，而我们也可以通过$attrs对象获取其他的三个属性data1、data2、data3,如下：

<comp propa="valueA" propb="valueB" data1="value1" data2="value2" data3="value3"></comp>

此时，我们可以在子组件的$value对象中获取到propA和propB的值，同时在子组件中使用“$attrs”映射对象获取到data1、data2、data3这三个属性。这时的结果如下：

valueA,valueB,value1,value2,value3

四、Vue$attrs的注意事项

在使用Vue$attrs的时候，需要注意一些要点：

  1. 如果你的组件没有定义props选项，那么在组件中所有的非事件、非插槽、非prop的属性都被认为是有效的$attrs对象，除非你通过v-bind或者直接绑定playback-autoplay事件来移除这些属性。
  2. 如果一个prop被删除了，那么它的值应该被保留在$attrs中，所以在子组件中，如果使用$attrs中的属性，那么应该使用“$attrs.key”而不是“key”来访问相关的属性值。
  3. 如果你使用了v-bind的缩写（即“:”），那么你应该指定:is.sync而不是:is，否则$attrs中的属性就无法被绑定。

五、Vue$attrs的扩展应用

当使用组件时，有时我们希望可以将除了组件本身定义的props属性外的其他props传递给组件，此时我们就可以使用Vue$attrs的联合扩展，将所有的props都包含在内。 下面是示例代码：

Vue.component('comp', {
  props: ['propA', 'propB', 'propC'],
  template: `
    <div>
      <p>{{ propA }}</p>
      <p>{{ propB }}</p>
      <p>{{ propC }}</p>
      <ul>
        <li v-for="(value, name) in $attrs" :key="name">{{ name }}: {{ value }}</li>
      </ul>
    </div>
  `,
  inheritAttrs: false,
})

需要注意的是，在Vue2.4以前，我们需要将Vue.config.devtools = true才能使用套路“inheritAttrs”选项。而在Vue2.4以后，你可以直接在组件定义时使用“inheritAttrs：false”来指定继承属性是否开启。

六、总结

Vue$attrs为我们提供了一种方便的方式来扩展子组件的props选项，以便在不需要使用大量props语句的情况下传递非prop类型的属性到子组件中。除此之外，我们还可以使用$attrs联合扩展，将所有props都包含在内。当我们了解到Vue$attrs的这些特性之后，我们就可以在Vue应用程序中更加便捷地使用自定义组件。

推荐文章