西安做网站微信公司,南京网站建设学习,搜索引擎排名优化技术,wordpress 文章添加子标题在实际开发中#xff0c;我们经常需要从父组件向子组件传递数据#xff0c;一般情况下#xff0c;我们使用 props。但有时候会遇到深度嵌套的组件#xff0c;而深层的子组件只需要父组件的部分内容。在这种情况下#xff0c;如果仍然将 prop 沿着组件链逐级传递下去#…在实际开发中我们经常需要从父组件向子组件传递数据一般情况下我们使用 props。但有时候会遇到深度嵌套的组件而深层的子组件只需要父组件的部分内容。在这种情况下如果仍然将 prop 沿着组件链逐级传递下去可能会很麻烦代码可维护性差。
Vue3 提供的 provide 可以在祖先组件中指定注入我们想要提供给后代组件的数据或方法而在任何后代组件中我们都可以使用 inject 来接收 provide 提供的数据或方法。
如下是用法案例
父组件传值如下
script setup langtsimport { provide,ref,readonly } from vue;import HomeView from ./views/HomeView.vue;provide(a,你好呀) // 提供静态值子组件不能对这个值进行修改const strref(开心啊)provide(b,str) // 提供响应式的值子组件可以对这个值进行修改const str1ref(哈哈)provide(c,readonly(str1)) // 将响应式的值转成readonly子组件不能这个值进行修改
/scripttemplateHomeView/HomeView
/template 子组件接受值如下
script setup langtsimport { inject } from vue;const ainject(a)const binject(b)b.value修改了父辈通过provide传来的值const cinject(c)c.value修改了父辈通过provide传来的值 // 警告[Vue warn] Set operation on key value failed: target is readonly.
/scripttemplatediv{{a}}/divdiv{{b}}/divdiv{{c}}/div
/template
使用场景组件深层嵌套的情况下祖先组件需要给后代组件传值
注意事项
Provide 和 Inject 只能在组件树中的非根节点上使用。也就是说你不能在根组件上直接使用它们。Provide 和 Inject 只在创建时运行一次并且不会随着组件实例的更新而重新运行。因此如果你需要动态提供或注入数据你可能需要使用更复杂的方法如 props 或自定义事件。Provide 和 Inject 不会自动触发视图或组件的重渲染。这意味着如果提供的值发生变化你不会立即看到这些变化反映在视图上。如果你需要响应这些变化你可能需要手动触发视图或组件的重渲染。
