vue中$attrs

$attrs 是 Vue.js 中的实例属性，用于访问父组件传递给子组件的非 props 属性。它是一个对象，包含了父组件传递给子组件的所有非 props 属性。

当父组件在使用子组件时，可以通过在子组件上绑定属性来传递数据。Vue.js 会自动将绑定的属性传递给子组件的 $attrs 属性中。

以下是 $attrs 的一些特点和使用场景：

• $attrs 对象中的属性是父组件传递给子组件的所有非 props 属性。其中，包括了父组件上绑定的所有属性，但不包括子组件内部定义的 props 属性。
• $attrs 提供了一种方便的方式来访问父组件传递的属性，而无需在子组件中逐个声明 props。
• 子组件可以使用 $attrs 来访问父组件传递的属性，并在子组件中使用这些属性。
• $attrs 可以用于将父组件传递的非 props 属性传递给子组件的某个子元素或第三方组件。
• $attrs 是响应式的，当父组件的属性发生变化时，子组件中的 $attrs 也会相应地更新。

下面是一个使用 $attrs 的例子：

<template>
  <div>
    <h1>Title: {{ $attrs.title }}</h1>
    <p>Content: {{ $attrs.content }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$attrs); // 输出父组件传递的属性
  }
}
</script>

在上面的例子中，父组件可以这样使用子组件：

<template>
  <div>
    <my-component title="Hello" content="This is the content"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

在子组件中，可以通过 $attrs 访问父组件传递的 title 和 content 属性，并在模板中显示它们的值。

需要注意的是， $attrs 是一个被动属性，它会自动接收父组件传递的非 props 属性，但子组件不能修改 $attrs 中的属性值。如果需要在子组件中修改传递的属性，可以通过定义 props 属性来实现。

需要注意以下几点：

1. $attrs仅包含父组件传递的非props属性。在子组件中声明的props属性不会出现在$attrs中。
2. $attrs是一个非响应式对象，这意味着当父组件中的属性发生更改时，子组件不会自动更新。如果需要响应式更新，可以使用v-bind指令将属性绑定到子组件的内部数据或计算属性中。
3. 如果你希望在子组件中接收所有父组件的属性（包括props和非props属性），可以使用v-bind="$attrs"将所有属性传递给子组件。