【Vue3】组件通信之$attrs

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 $attrs 实现父组件向子组件的子组件传数据，即向其孙子组件传数据。

Vue3 中组件间通信包括：

• 父组件向子组件传数据，实现方案有：
  • props
  • v-model
  • $refs
  • 默认插槽 / 具名插槽
• 子组件向父组件传数据
  • props
  • v-model
  • $parent
  • 自定义事件
  • 作用域插槽
• 父组件与子组件的子组件互传数据，即与孙子组件互传数据
  • $attrs
  • provider & inject
• 任意组件间传数据
  • mitt
  • Pinia

开发环境

分类	名称	版本
操作系统	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 函数声明接收即可。