【Vue3】组件通信之provide&inject
背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 provide
和 inject
实现父组件向子组件的子组件传数据,即向其孙子组件传数据。
Vue3 中组件间通信包括:
- 父组件向子组件传数据,实现方案有:
props
v-model
$ref
- 默认插槽 / 具名插槽
- 子组件向父组件传数据
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> 修改 Vue 根组件 src/App.vue
作为最顶层组件,使用 provide
向下层组件提供数据。
<template>
<div class="content">
<h2>制造商</h2>
<h3>库存:{{ count }}</h3>
<Agent />
</div>
</template>
<script setup lang="ts">
import { provide, reactive, ref } from 'vue'
import Agent from './components/Agent.vue'
const count = ref(20)
const phone = reactive({
brand: '华为',
model: 'Mate60',
price: 6999.00
})
function sell(value: number) {
count.value -= value
}
// 向下层组件提供数据
provide('inventory', {count, sell})
provide('phone', phone)
</script>
<style scoped lang="scss">
.content {
background-color: #D1D1D1;
padding: 20px;
}
</style>
注意:需要执行 npm install -D sass
命令安装 CSS 预处理器。
5> 定义中间层组件。
<template>
<div class="agent">
<h2>代理商</h2>
<Retailer />
</div>
</template>
<script setup lang="ts">
import Retailer from './Retailer.vue'
</script>
<style scoped lang="scss">
.agent {
background-color: #E1E1E1;
padding: 20px;
}
</style>
6> 定义最底层组件,使用 inject
方法接收来自上层组件的数据。
<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">
import { inject } from 'vue';
// inject 的第二个参数是默认值
const { count, sell } = inject('inventory', {
count: 0,
sell: (value: number) => {}
})
const phone = inject('phone', {
brand: 'unknown',
model: 'unknown',
price: 0
})
</script>
<style scoped lang="scss">
.retailer {
background-color: #F1F1F1;
padding: 20px;
}
</style>
7> 执行命令 npm run dev
启动应用,浏览器访问:http://localhost:5173/
,可见最底层组件已成功显示出来自最顶层组件的数据,点击 售卖一部
按钮观察顶层组件数据也跟随一起变化,说明顶层组件收到了来自底层组件的数据。
总结
- 使用
provide
和inject
实现跨组件传数据与$attrs
不同在于,不会影响处于中间位置的组件代码; - 父组件使用
provide
函数向底层组件提供数据和接收底层组件数据的函数; - 底层组件使用
inject
函数接收来自顶层组件的数据和向顶层组件发送数据的方法; inject
函数的第二个参数是默认值,当未收到来自顶层组件的对应数据时采用默认值。