背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 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
函数声明接收即可。