您现在的位置是：首页 > 网站制作 > vue.js心得vue.js心得
使用provide/inject子孙级组件访问父级组件
蒙xs2023-06-19【vue.js心得】人已围观
简介provide/inject可以让子孙其孙孙组件直接访问父组件数据无需层层传递，
注意：如果只是子组件访问建议使用props 无需使用provide/inject
vue2写法
(1)无响应式1.父组件定义与data平级
provide(){
return {
info:this.info
}
},
2.子孙组件直接使用
return {
info:this.info
}
},
inject:['info'],
注意:该方法数据不具有响应式，(2)响应式(传递的参数用一个方法返回)
1.父组件
provide(){
return {
info:()=> {
return this.info
}
}
},
return {
info:()=> {
return this.info
}
}
},
2.子孙组件(接收)
inject:['info'],
3.使用
{{ info() }}
vue3写法
1.父组件 LotteryData是接收的名字 page是数据import { provide } from "vue"
const page = ref(11)
provide('LotteryData', {
page
})
const page = ref(11)
provide('LotteryData', {
page
})
注意: provide要放在定义数据之后
2.子孙组件(接收)
import { inject } from "vue"
const LotteryData = inject('LotteryData')
const LotteryData = inject('LotteryData')
Tags：
很赞哦！ ()
随机图文
文章评论
猜你喜欢
