【Vue】Vue3.0（二十三）Vue3.0中$attrs 的概念和使用场景

一、$attrs的概念和使用场景

概念

在Vue 3.0中，$attrs是一个组件实例属性，它包含了父组件传递给子组件的所有非props属性。这里的非props属性是指那些父组件传递过来但子组件没有通过props显式定义来接收的属性。当父组件向子组件传递数据时，$attrs就像是一个“属性收集器”，自动收集这些未被props接收的属性，以便在组件内部或继续向下传递给更深层的子组件时使用。

使用场景

• 多层组件嵌套中的属性透传：在多层嵌套的组件结构中，经常会遇到父组件的某些属性需要传递给更深层的子组件，但中间的一些组件并不需要使用这些属性的情况。此时，就可以利用$attrs来实现属性的“穿透式”传递，无需在每个中间组件都去定义props来接收和再次传递这些属性，大大简化了多层组件间数据传递的流程。
• 动态属性传递：当需要动态地向子组件传递一些属性，且这些属性的具体内容可能会根据不同的业务场景或用户操作而变化时，使用$attrs会很方便。因为不需要提前在子组件中为每一个可能传递的属性都定义好props，只需要在父组件传递时将相关属性附上，子组件通过$attrs就能获取到这些动态传递的属性。

二、代码解释

代码：

Father.vue

<template><div class="father"><h3>父组件</h3><h4>a：{{ a }}</h4><h4>b：{{ b }}</h4><h4>c：{{ c }}</h4><h4>d：{{ d }}</h4><!-- 下面这行中的v-bind可以传对象，比如下面传递了一个{x:100,y:200}那就相当于给子组件传递了两个props属性，一个是x，一个是y 然后下面子组件中去接收就行 --><Child:a="a":b="b":c="c":d="d"  v-bind="{x:100,y:200}":updateA='updateA'/></div>
</template><script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue'let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)function updateA(value: number) {a.value += value
}
//测试一下在自己的组件中只定义的变量是否会被放在$attrs中
const productId = ref(123);
const productName = ref('Awesome Product');
const productImage = ref('product-image.jpg');
</script><style scoped>
.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;
}
</style>

• 在Father.vue组件的模板部分，通过属性绑定的方式向Child组件传递了多个属性，包括a、b、c、d以及一个通过v-bind绑定的对象{x:100,y:200}，还有updateA函数。在脚本部分，定义了a、b、c、d这几个ref类型的响应式数据，并初始化了相应的值，同时定义了updateA函数用于更新a的值。

Child.vue

<template><div class="child"><h3>子组件</h3><h4>a:{{a}}</h4><h4>b:{{b}}</h4><h4>其他：{{$attrs}}</h4><!-- 下面这行相当于传递了很多props给子组件 --><GrandChild v-bind="$attrs" /></div>
</template><script setup lang="ts" name="Child">
import GrandChild from './GrandChild.vue'
// defineProps(['a','b'])  //我现在对于父传过来的属性一个也不想使用，所以传过来的这些都在$attrs中，直接将这些传递给这个组件的子组件，也就是孙子组件
</script><style scoped>
.child {margin-top: 20px;background-color: skyblue;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;
}
</style>

• 在Child.vue的模板部分，展示了a和b的值（这里假设是为了示意可以获取到这些值，虽然在实际代码逻辑中作者提到不想使用这些属性），并通过v-bind="$attrs"将$attrs中的所有属性传递给了GrandChild组件。在脚本部分，虽然定义了defineProps(['a','b'])，但作者表示本意是不想使用父组件传递过来的这些属性，所以实际上这些属性还是会被放到$attrs中继续向下传递。

GrandChild.vue

<template><div class="grand-child"><h3>孙组件</h3><h4>a：{{ a }}</h4><h4>b：{{ b }}</h4><h4>c：{{ c }}</h4><h4>d：{{ d }}</h4><h4>x：{{ x }}</h4><h4>y：{{ y }}</h4><button @click="updateA(6)">点我将爷爷那的a更新</button> <button @click="mybutton">点我试一试</button></div>
</template><script setup lang="ts" name="GrandChild">
import {ref} from 'vue'
const {c} =defineProps(['a', 'b', 'c', 'd','x','y','updateA'])function mybutton(){console.log('@@',c);}
</script><style scoped>
.grand-child {margin-top: 20px;background-color: orange;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px black;
}
</style>

• 在GrandChild.vue的模板部分，展示了从父组件（通过$attrs传递过来）的a、b、c、d、x、y等属性的值，并且有一个按钮，点击该按钮会调用updateA(6)函数，这个函数是从父组件传递过来的，用于更新Father.vue组件中a的值。在脚本部分，通过defineProps(['a', 'b', 'c', 'd','x','y','updateA'])正确地接收了从父组件传递过来的这些属性，使得在模板中能够正常使用它们。

三、另一个$attrs使用的例子

假设我们有一个电商应用场景，有一个ProductPage组件（产品页面组件），它包含一个ProductDetails组件（产品详情组件）和一个ProductReviews组件（产品评论组件）。ProductPage组件会接收到一些关于产品的通用属性，如productId、productName等，这些属性需要传递给ProductReviews组件，但ProductDetails组件并不需要使用这些属性。

• ProductPage.vue组件

<template><div class="product-page"><ProductDetails :productImage="productImage" /><ProductReviews v-bind="{productId:productId,productName:productName,productImage:productImage}" /></div></template><script setup lang="ts" name="ProductPage">import ProductDetails from './ProductDetails.vue';import ProductReviews from './ProductReviews.vue';import { ref } from 'vue';const productId = ref(123);const productName = ref('Awesome Product');const productImage = 'https://images.dog.ceo//breeds//pembroke//n02113023_11091.jpg'</script><style scoped>.product-page {padding: 20px;}</style>

• ProductDetails.vue组件

<template><div class="product-details"><img :src="productImage" alt="Product Image"><h2>Product Details</h2><h4>{{productImage}}</h4></div></template><script setup lang="ts" name="ProductDetails">import { ref } from 'vue';import { defineProps } from 'vue';// const productImage = ref('');defineProps(['productImage'])</script><style scoped>.product-details {background-color: lightgray;padding: 10px;}</style>

• ProductReviews.vue组件

<template><div class="product-reviews"><h2>Product Reviews</h2><!-- <h4>{{$attrs}}</h4> --><p>Product ID: {{ productId }}</p><p>Product Name: {{ productName }}</p><button @click="fetchReviews">Fetch Reviews</button></div></template><script setup lang="ts" name="ProductReviews">import { onMounted, ref, toRefs,defineProps } from 'vue';
const {productId,productName} =defineProps(['productId','productName'])//   onMounted(() => {
//   const attrs = $attrs;
//   ({ productId, productName } = toRefs(attrs));
// });
//   // const { productId, productName } = toRefs($attrs);const fetchReviews = () => {// 这里可以根据productId去获取对应的产品评论数据等操作console.log(`Fetching reviews for product`,productId);};</script><style scoped>.product-reviews {background-color: lightyellow;padding: 10px;}</style>

在这个例子中，ProductPage组件将productId和productName等属性通过$attrs传递给了ProductReviews组件，而ProductDetails组件不需要处理这些属性，实现了在电商应用场景下组件间属性的合理传递。