Vue组件通信:依赖注入(provide + inject)

2023-12-13 23:49:14

Vue3文档:https://cn.vuejs.org/guide/components/provide-inject.html

Prop 逐级透传问题

多级组件 props 传值,组件链路非常长,不利于维护
在这里插入图片描述
provide 和 inject 可以帮助我们解决这一问题

在这里插入图片描述

Provide (提供)

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  }
}

provide() 函数接收两个参数:
第一个参数被称为注入名(key),可以是一个字符串或是一个 Symbol。、
第二个参数是提供的值(value),值可以是任意类型

Inject (注入)

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

注入默认值?

默认情况下,inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供,则会抛出一个运行时警告。
如果在注入一个值时不要求必须有提供者,那么我们应该声明一个默认值,和 props 类似:

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

使用 Symbol 作注入名

如果构建大型的应用,包含非常多的依赖提供,建议最好使用 Symbol 来作为注入名以避免潜在的冲突。
通常推荐在一个单独的文件中导出这些注入名 Symbol:

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

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

const injected = inject(myInjectionKey)

文章来源:https://blog.csdn.net/weixin_52268321/article/details/134982338
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。