【Vue3】组件通信之$attrs
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 $attrs 实现父组件向子组件的子组件传数据，即向其孙子组件传数据。
Vue3 中组件间通信包括：
- 父组件向子组件传数据，实现方案有：
propsv-model$refs- 默认插槽 / 具名插槽
- 子组件向父组件传数据
propsv-model$parent- 自定义事件
- 作用域插槽
- 父组件与子组件的子组件互传数据，即与孙子组件互传数据
$attrsprovider&inject
- 任意组件间传数据
mittPinia
开发环境
| 分类 | 名称 | 版本 |
|---|---|---|
| 操作系统 | Windows | Windows 11 |
| IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。
2> 删除 src 目录下 assets 和 components 目录。
3> 修改 src 目录下 main.ts。
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
4> 定义最底层组件，使用 defineProps 函数声明需要接收的来自上层组件的数据。
<template>
<div class="retailer">
<h2>零售商</h2>
<h3>数量：{{ count }}</h3>
<h3>品牌：{{ phone.brand }}</h3>
<h3>型号：{{ phone.model }}</h3>
<h3>价格：￥{{ phone.price }}</h3>
</div>
</template>
<script setup lang="ts">
defineProps(['count', 'phone'])
</script>
<style scoped lang="scss">
.retailer {
background-color: #F1F1F1;
padding: 20px;
}
</style>
注意：需要执行 npm install -D sass 命令安装 CSS 预处理器。
5> 定义中间层组件，引用最底层组件，并在组件标签上使用 v-bind 绑定 $attrs，$attrs 中的值来自父组件且未在当前组件使用 defineProps 函数声明接收。
<template>
<div class="agent">
<h2>代理商</h2>
<Retailer v-bind="$attrs" />
</div>
</template>
<script setup lang="ts">
import Retailer from './Retailer.vue'
</script>
<style scoped lang="scss">
.agent {
background-color: #E1E1E1;
padding: 20px;
}
</style>
6> 修改 Vue 根组件 src/App.vue 作为最顶层组件，使用自定义组件标签属性向子组件传数据。
<template>
<div class="content">
<h2>制造商</h2>
<Agent :count="count" :phone="phone" />
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import Agent from './components/Agent.vue'
const count = ref(20)
const phone = reactive({
brand: '华为',
model: 'Mate60',
price: 6999.00
})
</script>
<style scoped lang="scss">
.content {
background-color: #D1D1D1;
padding: 20px;
}
</style>
7> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/，可见最底层组件已成功显示出来自最顶层组件的数据。
8> 父组件也可以通过传递自定义函数接收来自孙子组件的数据，修改 App.vue，新增一个扣减库存的函数，并使用组件标签自定义属性传给子组件。
<template>
<div class="content">
<h2>制造商</h2>
<h3>库存：{{ count }}</h3>
<Agent :count="count" :phone="phone" :sell="reduce" />
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import Agent from './components/Agent.vue'
const count = ref(20)
const phone = reactive({
brand: '华为',
model: 'Mate60',
price: 6999.00
})
function reduce(value: number) {
count.value -= value
}
</script>
<style scoped lang="scss">
.content {
background-color: #D1D1D1;
padding: 20px;
}
</style>
9> 处于中间层的组件代码不做任何变更，直接修改底层孙子组件代码，使用 defineProps 函数接收顶层组件传来的 sell 函数，并新增一个按钮，每点击一次向顶层组件传数据 1。
<template>
<div class="retailer">
<h2>零售商</h2>
<h3>数量：{{ count }}</h3>
<h3>品牌：{{ phone.brand }}</h3>
<h3>型号：{{ phone.model }}</h3>
<h3>价格：￥{{ phone.price }}</h3>
<button @click="sell(1)">售卖一部</button>
</div>
</template>
<script setup lang="ts">
defineProps(['count', 'phone', 'sell'])
</script>
<style scoped lang="scss">
.retailer {
background-color: #F1F1F1;
padding: 20px;
}
</style>
10> 浏览器刷新访问：http://localhost:5173/，点击 售卖一部 按钮观察顶层组件数据也跟随一起变化，说明顶层组件收到了来自底层组件的数据。
总结
$attrs 的作用其实是对 props 传数据的增强，如果父组件传给子组件的数据，子组件并未使用 defineProps 函数声明接收，则此部分数据自动存储在子组件的 $attrs，子组件在调用其他子组件时，可以使用组件标签的 v-bind 直接传递 $attrs，即 v-bind="$attrs"，这样数据便继续传递给下一层组件，一直到需要的组件使用 defineProps 函数声明接收即可。
