Vue 中使用 $attrs 构建高级组件

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/195921.html

1. 什么是 $attrs
2. attrs V3 vs $attrs V2
3. 事例
• 添加一些属性
• 添加标题和值
• $attrs 救场
4. inheritAttrs: false

学习一下 Vue3 中的 $attrs 属性。首先，我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点，并通过事例来加深对它的理解。

真正理解了 $attrs 属性有助于我们构建易于使用和可扩展的高级组件

什么是 $attrs

对 $attrs 定义， Vue2 与 Vue3 是不一样的，这里我们主要来介绍 Vue3 的版本：

$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

$attrs也可以被看作是一个安全网，它可以捕获任何我们没有在组件中声明的东西。我们考虑一个只有一个属性和事件处理程序的组件，如下所示：

<template>
  <h1 @click="$emit('custom', '改变标题')">{{ title }}</h1>
</template>
<script>
export default {
  name: 'Example',
  props: ['title'],
  emits: ['custom'],
}
</script>

如果在父组件中像下面这样实例化上面的组件：

<template>
  <div id="app">
    <SimpleEvent
      id="myId"
      
      data-cy="cypress-testing"
      @blur="onBlur"
      title="测试$attrs"
      description="没有声明 props"
      @custom="onCustom"
    />
  </div>
</template>

<script setup>
import SimpleEvent from './components/Button.vue'

const onBlur = () => {
  // todo
}
const onCustom = () => {
  // todo
}

</script>

如果在组件中把 $attrs 打印出来，我们会得到如下内容：

{
  id: 'myId',
  class: 'myClass',
  'data-cy': 'cypress-testing',
  description: '没有声明 props',
  onBlur: () => { // todo } 
}

上面这些信息，感觉没啥用，其实不然，我们下面会介绍如何利用这些信息。

attrs V3 vs $attrs V2

我们来看下 Vue2 与 Vue3 中的 attrs 属性的区别，先来看张图：

还有一个问题–我们添加的属性不仅被分配给了 input 元素上，也分配给了 root元素。

通常情况下，这可能对界面没啥影响，但有的属性确实会生产一些副作用，下面，我们来解决这个问题。

inheritAttrs: false

默认情况下，任何被传递给组件的额外参数都会自动应用于根元素（以及所有有 $attrs 绑定的元素）。

为了关闭这个功能，并控制哪些元素可接受这个额外的属性，我们可以使用一个名为 inheritAttrs 的标志，并将其设置为false。

经过这样的改变，我们的 HTML 就变得漂亮且干净了。所有的额外属性都只作用于 input 元素。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/