个人订阅号支持微网站的建设吗,2345浏览器导航页,app软件开发公司排行,深圳集团网站开发公司在vue项目中#xff0c;如果遇到跨组件多层次传值的话#xff0c;一般会用到vuex#xff0c;或者其他第三方共享状态管理模式#xff0c;如pinia等#xff0c;但是对于父组件与多层次孙子组件时#xff0c;建议使用provide 与 inject#xff0c;与之其他方式相比#x…在vue项目中如果遇到跨组件多层次传值的话一般会用到vuex或者其他第三方共享状态管理模式如pinia等但是对于父组件与多层次孙子组件时建议使用provide 与 inject与之其他方式相比简单方便。
基础使用
Vue2 option api
# App.vue
templateparent/
/templatescriptimport Parent from /components/parent.vue;export default {name: App,components: {Parent},provide: {word: Hello Word}
}
/script# parent.vue
templatechild /
/templatescript
import Child from /components/child.vue;export default {name: parent,components: {Child}
}#child.vue
templatespan{{ word }}/span
/templatescript
export default {name: child,inject: [word]
}在界面就显示出相应内容。 inject 与 props 是相似可以是一个数组也可以是一个对象如果是对象的话可以为每一个属性另设别名默认值。如下 inject: {childWord: {from: word,default: 默认值}}childWord 是孙子组件另起的别名from 数据来源字段default 默认值default 与 props 中的 default 一样如果默认值是一个对象的话default 值必须是一个工厂函数返回值。
Vue3 composition api
# App.vue
templateparent /
/templatescript setupimport Parent from /components/parent.vue;import {provide} from vue;provide(word, Hello Vue3.0)
/script# chile.vue
template{{ word }}
/templatescript setupimport { inject } from vue;const word inject(word);
/scriptinject 默认值
const word inject(word, 默认值);
或者
const word inject(word, () {});在 Vue3.0 中响应式数据传递因为没有 this 所限制可以直接传递 ref 或 reactive 值如下
let val ref(0);
provide(word, val.value);
或者
provide(word, val)对于 ref 数据有没有 .value 都可以因为在 provide 中 会通过 isRef 函数去判断当前值是否为 ref 数据如果是Vue 会自动 通过 toValue 函数去取值。
注意
provide 与 inject 可以传递响应式数据但是 provide 必须是一个函数返回值与组件中的 data 一样原因是如果是一个普通的对象的话this 指向的是 undefined 不是该组件实例这里是运用到的了闭包函数使得this 指向当前组件实例。
# App.vueprovide: {context: this}# child.vueinject: [context],mounted() {console.log(this.context);}这时控制台打印出来的 this 值是 undefined。 如果 provide 是一个函数的话打印出来的就是当前实例对象。 provide 也不能是一个箭头函数因为箭头函数还会改变 this 的指向。 provide: () {return {context: this}}这时 this 指向的也是 undefined。
