目录

一.性质

1.响应式

2.包含所有非prop属性

3.动态属性

二.作用

1.访问非prop属性

2.灵活性

3.组件重用

三.使用

1.爷爷组件

2.父亲组件

3.儿子组件

四.代码

1.爷爷组件代码

2.父亲组件代码

3.孙子组件代码

五.效果图

---

在Vue 3中，$attrs 是一个响应式对象，它包含了父组件传递给子组件的所有非prop属性。（爷-->孙）

一.性质

1.响应式

$attrs 是一个响应式对象，这意味着当父组件的数据发生变化时，子组件中的 $attrs 也会相应地更新。

2.包含所有非prop属性

$attrs 包含了所有传递给子组件的属性，除了那些显式定义为prop的属性。

3.动态属性

$attrs 中的属性名称是动态的，它反映了父组件传递给子组件的属性名。

二.作用

1.访问非prop属性

子组件可以通过 $attrs 访问从父组件传递下来的所有非prop属性，而不需要显式地在props中声明它们。

2.灵活性

使用 $attrs 可以提高组件的灵活性，因为子组件不需要知道父组件传递了哪些属性，它可以直接使用这些属性。

3.组件重用

当组件被重用时，它不需要修改以适应不同的父组件属性，因为它可以通过 $attrs 接收这些属性。

三.使用

1.爷爷组件

这段代码创建了一个界面，展示爷爷的个人信息，并允许通过 update函数与 father 组件进行交互，更新爷爷的姓名。father 组件接收到 name、car 和 price 的值，并可能根据这些值进行相应的操作。通过这种方式，两个组件之间实现了数据的传递和响应。

2.父亲组件

<son v-bind="$attrs"/>：这里使用 v-bind 指令将当前组件的所有属性（$attrs）绑定到 son 组件上。$attrs 是一个包含所有非 prop 属性的对象。

3.儿子组件

接收 name, car, 和 price 作为属性，并通过模板显示这些信息。此外，包含一个按钮，当点击时，会调用 update 方法，并传入 '孙子' 参数给爷爷。

四.代码

1.爷爷组件代码

<template>

    <div class="grandpa">
        <h4>我是爷爷</h4>
        <h4>车主：{{ name }}</h4>
		<h4>car：{{ car }}</h4>
		<h4>price：{{ price }}w</h4>
    </div>
    <father :name="name"  v-bind="{car:'宝马',price:200}" :update="update"/>
</template>


<script setup lang="ts" name="grandpa">
import father from '../components/father.vue'

import { ref } from "vue";
	let name = ref('爷爷')
    let car = ref('宝马')
    let price = ref(200)

	function update(value:any){
		name.value = value
    } 

</script>

<style >
.grandpa {
  background-color: orange;
}


</style>

2.父亲组件代码

<template>

    <div class="father">
        <h4>我是爹</h4>  
    </div>

    <son v-bind="$attrs"/>
    
</template>

<script setup lang="ts" name="father">
import son from '../components/son.vue'

</script>


<style>
.father{
    background-color: skyblue;
}

h4{
    margin-left: 20px;
    font-size: 20px;
}

</style>

3.孙子组件代码

<template>
    <div class="son">
        <h4>我是儿子</h4>
        <h4>车主：{{ name }}</h4>
		<h4>car： {{ car }}</h4>
		<h4>price：{{ price }}w</h4>
		<button @click="update('孙子')">把车给孙子</button>
    </div>
</template>


<script setup lang="ts" name="son">
defineProps(['name','car','price','update'])

</script>


<style>
.son{
    background-color: beige;
}

h4{
    margin-left: 20px;
    font-size: 20px;
}
button{
    width: 120px;
    height: 60px;
    font-size: 20px;
    margin-left: 20px;
    border-width: 2px;
    border-color: red;
}
</style>

五.效果图