Vue3 provide、inject 配合使用 readonly

2022-05-12 525 阅读1分钟

前言

在父子组件传递数据时，通常使用 props、emit，当父传给孙组件时，虽然可以在子组件使用 v-bind="$attrs"，去传递。如果遇到了多个孙组件要使用相同数据，这样就有些麻烦了。
像这种情况，可以使用 provide、inject，去解决，无论组件嵌套多深，祖先组件都可以为后代组件提供数据。

provide()

提供一个值，可以被注入到后代组件中

function provide<T>(key: InjectionKey<T> | string, value: T): void
// 示例  供给响应式的值
const count = ref(0)
provide('count', count)

inject

注入一个由祖先组件或 app.provide()供给的值

// 没有默认值
function inject<T>(key: InjectionKey<T> | string): T | undefined

// 带有默认值
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T

问题

后代组件修改了 inject 的值是可以是成功的，这样就违反了 Vue 单向数据流，状态容易混乱
引入 Vue3 中的 readonly，则可以实现数据不被后代组件修改，修改了会抛出错误，如下图：

当后代组件尝试修改值时，编译器提示

// 实例
// provide
const activeImei = ref<string>('')
provide('activeImei', readonly(activeImei))

// inject
const activeImei = inject<Readonly<Ref<string>>>('activeImei')