vue3中的useAttrs()的使用和注意点

Vue3作为目前前端领域中最为热门的框架之一，引入了许多新的特性和API。其中，seAttrs()是Vue3中值得注意的一个API，它可以帮助我们更方便地获取和处理父组件传递过来的props属性和事件。但是，使用useAttrs()也有一些需要注意的点，本文将介绍useAttrs()的使用方法及其注意点。如果你正在学习或使用Vue3，那么本文将为你提供帮助。

一、useAttrs的基本使用

在Vue 3中，使用<script setup>语法来编写组件，可以将组件的模板、逻辑、响应式数据等写在同一个地方，提高可读性和维护性。

使用useAttrs函数可以接收父组件传递的属性和事件，在组件中可以直接使用这些属性和事件，无需在props和emits中声明。

下面以一个简单的示例说明如何使用useAttrs：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
    <button @click="onClick">点击</button>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'

export default {
  setup() {
    const { title, content, onClick } = useAttrs()

    return { title, content, onClick }
  }
}
</script>

在父组件中通过传递属性和事件来使用上述示例的子组件：

<template>
  <div>
    <MyComponent title="标题" content="内容" @click="handleClick" />
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  components: { MyComponent },
  methods: {
    handleClick() {
      console.log('点击事件触发')
    }
  }
}
</script>

在子组件中，我们通过useAttrs()函数来接收父组件传递的title、content属性和onClick事件。在setup()函数中，我们可以直接使用这些属性和事件，无需再声明为props和emits，然后将它们返回。

这样，我们在模板中就可以直接使用它们，如上述示例中的{{ title }}、{{ content }}和@click="onClick"。当父组件传递属性和事件时，子组件就可以直接使用它们，无需再次声明。

二、useAttrs接收属性和defineProps接收属性

1. 二者用法对比

在 Vue3 的 <script setup> 语法中，可以使用 useAttrs 方法来接收父组件传递的属性。和使用 defineProps 接收属性时相比，useAttrs 的优先级要低。具体来说：

1. useAttrs 方法能够接收到所有属性，包括未在组件中声明的属性，但不能够对接收到的属性进行类型校验和默认值设置。

2. defineProps 方法只能接收到在组件中声明的属性，但能够对接收到的属性进行类型校验和默认值设置，使得组件能够更加健壮。

举个例子，假设我们有一个 HelloWorld 组件，它接收一个名为 name 的字符串属性：

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  name: {
    type: String,
    default: 'world'
  }
})
</script>

这样，当 HelloWorld 组件接收到一个名为 name 的属性时，会进行类型校验，如果不是字符串类型则会报错，并且如果该属性未传递，则会使用默认值 'world'。

如果我们使用 useAttrs 方法来接收属性，代码如下所示：

<template>
  <div>Hello, {{ name }}!</div>
</template>

<script setup>
import { useAttrs } from 'vue'

const { name } = useAttrs()
</script>

这样，name 变量就可以接收到所有传递给 HelloWorld 组件的属性，包括未在组件中声明的属性。但是，name 的类型没有进行校验，也没有默认值设置，需要开发者自己处理。如果父组件传递的属性有误或者未传递需要的属性，可能会导致 HelloWorld 组件出现错误，从而影响应用的稳定性。

因此，一般情况下推荐使用 defineProps 方法来接收属性，因为它能够对接收到的属性进行类型校验和默认值设置，使得组件更加健壮。只有在需要接收未在组件中声明的属性时，才使用 useAttrs 方法。

2. 同时接收某一个属性时，优先级的问题

在使用 useAttrs 和 defineProps 接收属性时，使用 defineProps 接收的属性会优先级更高，因为它可以对每个属性进行类型验证和默认值设置，同时这些属性会被添加到组件实例的 $props 属性中。

而使用 useAttrs 接收的属性只是简单地返回所有传递的属性，不能对其进行类型验证和默认值设置，同时这些属性不会被添加到组件实例的 $props 属性中。

举例来说，假设父组件传递了三个属性 name、age 和 sex，而在子组件中我们只使用了 sex 属性，同时使用了 defineProps 和 useAttrs 来接收属性，那么此时 sex 属性的取值以 defineProps 为准。

如下所示，在子组件中我们使用 defineProps 来接收 sex 属性，同时使用 useAttrs 来接收所有属性，然后在模板中使用 $props.sex 和 $attrs.sex 来获取 sex 属性的值：

<template>
  <div>
    props.sex: {{ $props.sex }}<br>
    attrs.sex: {{ $attrs.sex }}
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'

const props = defineProps({
  sex: String
})
const attrs = useAttrs()
console.log(attrs.sex) // 'undefined'

</script>

假设父组件传递的属性为 { name: 'John', age: 28, sex: 'male' }，那么在子组件中 props.sex 的值会是 'male'，而 $attrs.sex 的值也会是 'undefined。

因此，props与useAttrs方法都可以获取父组件传递过来的属性与属性值
但是props接受了useAttrs方法就获取不到了。

3. 使用useAttrs实现对el-button的二次封装

在Vue 3中，使用<script setup>可以轻松地实现对组件的二次封装。在<script setup>中，我们可以使用defineProps和defineEmits定义props和emits，而不必在setup()函数中重新声明。此外，我们还可以使用useAttrs来获取父组件传递的任何额外属性，并将其传递给子组件。

举例来说，我们可以定义一个MyButton组件并对ElButton进行二次封装。使用useAttrs获取所有父组件传递的属性。接下来，我们将这些属性传递给ElButton组件，并在MyButton组件中使用$attrs来将这些属性绑定到ElButton上。

代码实现如下：

<template>
   <div :title="$attrs.title">
     <el-button :="$attrs"></el-button>   
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'
const $attrs = useAttrs()
</script>

在上面的代码中，我们使用了useAttrs来获取所有父组件传递的属性，并将它们绑定到ElButton上。这样，我们就可以像以下方式使用MyButton组件：

<template>
  <div>
    <my-button type="primary" @click="handleClick" title="我是按钮">Click me!</my-button>
  </div>
</template>

<script setup>
import MyButton from './MyButton.vue'

function handleClick() {
  console.log('Button clicked!')
}
</script>

在上面的代码中，我们使用了MyButton组件，并传递了type、title属性和click事件。这些属性和事件会被自动传递给ElButton组件，并在最终呈现的UI中生效。

三、总结

总之，使用useAttrs()是Vue 3中非常方便和灵活的方法，它允许我们轻松地接收和处理传递给组件的属性，同时提供了一些重要的注意事项，以确保我们的组件可以始终正确地工作。我们希望本文可以为您提供有关此功能的详尽指南，并帮助您在使用Vue 3时更加自信和有效地编写组件。保持实践并继续探索吧！