物流网站模板,晓风彩票网站建设源代码授权,千图素材网站,广州网站建设与网页设计1、provide 和reject 可以实现一条事件线上的 父传子#xff0c;父传孙等#xff1b;相比较 props emits 仅限与父子传参更方便#xff0c;相较于pinia书写更简单#xff0c;但是需要注意使用响应式#xff0c;如果是非响应式的会导致页面更新不及时
父组件
templat…1、provide 和reject 可以实现一条事件线上的 父传子父传孙等相比较 props emits 仅限与父子传参更方便相较于pinia书写更简单但是需要注意使用响应式如果是非响应式的会导致页面更新不及时
父组件
template
divPROVIDE/div
{{ num }}
button clickhandleChangeNumchange num/button
br
button clickhandleChangeDatachange Data/button
br
dataObj-name:{{ dataObj.age }}
br
Child/Child
/template
script setup langts
import { provide, ref, toRef, reactive, toRefs } from vue
import Child from ./components/child.vue
// 基本类型
let num refnumber(0)
const handleChangeNum () {num.value
}
// 响应式
provide(num, toRef(num))
// 非响应式
// provide(num, num.value)interface objType {name: stringage: number
}
// 引用类型
let dataObj reactiveobjType({name: 测试,age: 12
})
const handleChangeData () {dataObj.age
}
// 响应式
provide(dataObj, toRefs(dataObj))
// 非响应式
// provide(dataObj, dataObj)
/script
style langscss scoped
/style子组件
template
div son -page---{{ num }}/div
br
dataObjSon{{ dataObjSon.age }}
/template
script setup langts
import { inject,Ref, ref } from vue
let num injectRefnumber(num, ref(2))
console.log(inject(num)--, num.value)
let dataObjSon inject(dataObj)
console.log(idataObjSon--, dataObjSon)
/script
style langscss scoped
/style
