vue注意点：$attrs、$slots！插槽

**Vue 的注意点：$attrs 和 $slots**

在 Vue 中，组件的使用和实现是非常灵活的。然而，在实际开发中，我们经常会遇到一些容易忽略的注意点，这些注意点可以帮助我们更好地理解和利用 Vue 的特性。

本文将重点讨论两个重要的方面：$attrs 和 $slots。这两个概念对于构建复杂组件、实现动态渲染和插槽功能至关重要。

###1. $attrs在 Vue 中， `$attrs` 是一个特殊属性，它包含了从父组件传递给子组件的所有非 props 属性。也就是说，如果父组件没有显式定义某个属性作为 props，那么这个属性就会被自动添加到 `$attrs` 中。

#### 为什么需要 $attrs？

在实际开发中，我们经常会遇到这样的场景：一个组件可能需要接收一些额外的属性，这些属性并不是预先定义好的 props。例如，一个表单组件可能需要接收 `class` 或 `style` 属性来控制其样式。

#### 如何使用 $attrs？

要使用 `$attrs`，我们只需在子组件中使用 `$attrs` 来访问这些额外的属性。例如：

html<template>
 <div class="container">
 <!-- 使用 $attrs -->
 <slot v-bind="$attrs"></slot>
 </div>
</template>

<script>
export default {
 inheritAttrs: true,
 props: ['class', 'style'],
 methods: {
 // ...
 }
}
</script>

在这个例子中，我们定义了一个 `container` 组件，它接收 `class` 和 `style` 属性作为 props。我们还设置了 `inheritAttrs` 为 `true`，这意味着 `$attrs` 将包含所有非 props 属性。

#### $attrs 的注意点* `$attrs` 只包含从父组件传递给子组件的属性，不包括子组件自身定义的 props。
* 如果子组件定义了相同名称的 props，那么这些 props 将覆盖 `$attrs` 中的同名属性。

###2. $slots在 Vue 中，$slots 是一个特殊属性，它包含了从父组件传递给子组件的所有插槽内容。也就是说，如果父组件使用 `