vue3【详解】跨组件通信 -- 依赖注入 provide inject

用于解决跨组件(父组件与所有后代)数据通信

提供数据 provide

传出数据的组件 (通常为父辈组件)提供数据

html 复制代码
<script setup>
import { provide } from 'vue'

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

provide() 函数

  • 第1个参数 ------ 注入名,字符串或 Symbol
  • 第2个参数 ------ 注入值,任意类型(若为 ref,则后代组件与父组件会建立响应式的联系)

注入数据 Inject

需要数据的组件 (通常为后代组件)注入数据

html 复制代码
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

可添加默认值(当父组件未提供数据时使用)

js 复制代码
const value = inject('message', '这是默认值')

当默认值需要通过调用一个函数或初始化一个类来取得时,为了避免在用不到默认值的情况下进行不必要的计算或产生副作用,可以使用工厂函数来创建默认值:

js 复制代码
const value = inject('key', () => new ExpensiveClass(), true)

第三个参数 true 表示默认值应该被当作一个工厂函数。

数据使用方修改响应式数据

建议尽可能将对响应式状态的变更都保持在供给方组件中,以便更容易维护。

但有时数据使用方需要修改响应式数据,怎么办?

可以在供给方组件内声明并提供一个更改数据的方法函数

html 复制代码
<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>
html 复制代码
<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

使用 readonly() 来包装提供的值,可以确保提供的数据不能被注入方的组件更改

html 复制代码
<script setup>
import { ref, provide, readonly } from 'vue'

const count = ref(0)
provide('read-only-count', readonly(count))
</script>

使用 Symbol 作注入名

使用场景:

  • 大型的应用,包含非常多的依赖提供
  • 编写提供给其他开发者使用的组件库

好处:避免潜在的命名冲突。

推荐在一个单独的文件中导出这些注入名 Symbol

js 复制代码
// keys.js
export const myInjectionKey = Symbol()
js 复制代码
// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, { /*
  要提供的数据
*/ });
js 复制代码
// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

提供全局数据 app provide

常用于编写插件

js 复制代码
import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
相关推荐
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷3 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05675 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.5 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding5 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥5 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信5 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩5 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌6 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司7 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui