合优做网站需要多少钱,好的广告片拍摄制作公司,效果图制作公司排名,株洲专业做网站设计的Prop 逐级透传问题
通常情况下#xff0c;当我们需要从父组件向子组件传递数据时#xff0c;会使用 props。
如果是多层级嵌套的组件#xff0c;如何从一级传递到 3 级甚至更远呢。
若使用 props 则必须将其沿着组件链逐级传递下去#xff0c;这会非常麻烦#xff0c;所…Prop 逐级透传问题
通常情况下当我们需要从父组件向子组件传递数据时会使用 props。
如果是多层级嵌套的组件如何从一级传递到 3 级甚至更远呢。
若使用 props 则必须将其沿着组件链逐级传递下去这会非常麻烦所以被称为“prop 逐级透传”显然是我们希望尽量避免的情况。 解决方案
provide 和 inject 可以帮助我们解决这一问题。
一个父组件相对于其所有的后代组件会作为依赖提供者。任何后代的组件树无论层级有多深都可以注入由父组件提供给整条链路的依赖。 Provide (提供)
要为组件后代提供数据需要使用到 provide() 函数
script setup
import { provide } from vueprovide(/* 注入名 */ message, /* 值 */ hello!)
/scriptprovide() 函数接收两个参数。第一个参数被称为注入名可以是一个字符串或是一个 Symbol。
后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()使用不同的注入名注入不同的依赖值。
第二个参数是提供的值值可以是任意类型包括响应式的状态比如一个 ref
import { ref, provide } from vueconst count ref(0)
provide(key, count)
提供的响应式状态使后代组件可以由此和提供者建立响应式的联系。
应用层 Provide
除了在一个组件中提供依赖我们还可以在整个应用层面提供依赖
import { createApp } from vueconst app createApp({})app.provide(/* 注入名 */ message, /* 值 */ hello!)使用场景
在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用因为插件一般都不会使用组件形式来提供值。
Inject (注入)
要注入上层组件提供的数据需使用 inject() 函数
script setup
import { inject } from vueconst message inject(message)
/script如果提供的值是一个 ref注入进来的会是该 ref 对象而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。
注入默认值 默认情况下inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供则会抛出一个运行时警告。 如果在注入一个值时不要求必须有提供者那么我们应该声明一个默认值和 props 类似
// 如果没有祖先组件提供 message
// value 会是 这是默认值
const value inject(message, 这是默认值)在一些场景中默认值可能需要通过调用一个函数或初始化一个类来取得。为了避免在用不到默认值的情况下进行不必要的计算或产生副作用我们可以使用工厂函数来创建默认值
const value inject(key, () new ExpensiveClass(), true)第三个参数表示默认值应该被当作一个工厂函数。
和响应式数据配合使用
当提供 / 注入响应式的数据时建议尽可能将任何对响应式状态的变更都保持在供给方组件中。
这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内使其更容易维护。
推荐在供给方组件内声明并提供一个更改数据的方法函数
!-- 在供给方组件内 --
script setup
import { provide, ref } from vueconst location ref(North Pole)function updateLocation() {location.value South Pole
}provide(location, {location,updateLocation
})
/script!-- 在注入方组件 --
script setup
import { inject } from vueconst { location, updateLocation } inject(location)
/scripttemplatebutton clickupdateLocation{{ location }}/button
/template使用 Symbol 作注入名
我们通常推荐在一个单独的文件中导出这些注入名 Symbol
// keys.js
export const myInjectionKey Symbol()// 在供给方组件中
import { provide } from vue
import { myInjectionKey } from ./keys.jsprovide(myInjectionKey, { /*要提供的数据
*/ });// 注入方组件
import { inject } from vue
import { myInjectionKey } from ./keys.jsconst injected inject(myInjectionKey)
Symbol是JavaScript中提供的第七种数据类型
前面六种分别是string、number、boolean、null、undefined和广义的Object在ECMAScript2020的时候引入了第八种数据类型即BigInt。
Symbol的主要应用场景有两个分别是解决命名冲突和用作私有属性 欢迎关注后面会有一些资源可以免费获取哟~
分享前后端编程经验技术干货技术方案好用的开发工具和应用软件人生经验感悟等
