wordpress 模版安装,个人如何优化网站有哪些方法,邮箱wordpress,广东建设集团有限公司前置说明 在 Vue 3 中#xff0c;provide 和 inject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务#xff0c;然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据#xff0c;而不需要…前置说明 在 Vue 3 中provide 和 inject 是一对用于跨组件树传递数据的 API。它们允许你在祖先组件中使用 provide 提供数据或服务然后在后代组件中使用 inject 来获取这些数据或服务。这种方式特别适用于跨多个层级的组件传递数据而不需要逐层传递 Props。
模拟场景三个界面FatherPage、MiddlePage、SonPage其中他们也是层级引用的FatherPage中引用MiddlePage然而MiddlePage中包含SonPage界面
此时我们想将FatherPage中的数据传递给SonPage中我们可以使用provide和inject直接进行传递
示例 FatherPage.vue:
script setup nameFatherPage langts
import MiddlePage from ./MiddlePage.vue;const msg 父亲界面
/scripttemplate
divh1{{msg}}/h1MiddlePage/
/div
/template
MiddlePage.vue
script setup nameMiddlePage langts
import sonPage from /components/ProvideIn/son.vue
/scripttemplate
div classmiddleh2中间界面/h2sonPage/
/div
/template sonPage.vue
script setup namesonPage langts
const dataSmg 儿子界面/scripttemplate
div classsonh3{{dataSmg}}/h3
/div/template 快速上手
FatherPage中传递的数据
script
import { provide,ref } from vue//顶层组件提供数据
provide(data-key, This is a father data!!!)
/script
SonPage中接受的数据
script
import { inject,provide } from vue;const dataFather inject(data-key)
/script
完整案例 FatherPage
script setup nameFatherPage langts
import { provide,inject,ref } from vueimport MiddlePage from ./MiddlePage.vue;const msg 父亲界面//1.顶层组件提供数据
provide(data-key, This is a father data!!!)//2.向子组件传递响应式数据
const countMsg ref(10)
provide(count-key,countMsg)//3.向子组件传递方法
const changeCount function(){countMsg.value
}provide(change-key,changeCount)//4.尝试接受子组件的数据
const dataSon inject(son-key)// //尝试自己定义数据自己接受不可行
// provide(data-sonKey, This is a son two data!!!)// const dataSon inject(data-sonKey)/scripttemplate
divh1{{msg}}/h1hr数据{{ dataSon }}button clickchangeCount点击改变count/buttonMiddlePage/
/div/templatestyle scoped/style
MiddlePage
script setup nameMiddlePage langts
import sonPage from /components/ProvideIn/son.vue
/scripttemplate
div classmiddleh2中间界面/h2sonPage/
/div/templatestyle scoped
.middle{background-color: aquamarine;
}
/style
SonPage
script setup namesonPage langts
import { inject,provide } from vue;const dataFather inject(data-key)
const dataSmg 儿子界面const dataCount inject(count-key)const changeMethod inject(change-key)//父组件不能接受子组件的数据
// provide(son-key,dataSmg)/scripttemplate
div classsonh3{{dataSmg}}/h3hr父组件跳跃中间层传递过来的数据{{ dataFather }}h3响应式数据{{ dataCount }}/h3button clickchangeMethod改变父组件的数据/button
/div/templatestyle scoped
.son{background-color: rgb(145, 145, 63);
}
/style
效果 注意事项
provide 和 inject 是全局的这意味着在整个应用中都可以访问到提供的数据。因此要小心命名冲突。inject 可以在任何组件中使用但通常在需要跨多层组件共享数据时最为有用。如果一个组件同时使用了 provide 和 inject确保它们的键名不会冲突否则可能会导致意外的行为。
总结
provide和inject的作用是什么跨层组件通信如何在传递的过程中保持数据响应式第二个参数传递ref对象底层组件想要通知顶层组件做修改如何做传递方法底层组件调用方法一颗组件树中只有一个顶层或底层组件吗相对概念存在多个顶层和顶层的关系
