vue3中 Provide / Inject

984 阅读1分钟

Provide / Inject 是为了解决多层父子组件时,props传值比较麻烦的问题

父组件provide提供数据

子组件inject使用数据

1.非组合式api中使用

//app.vue 父组件

image.png

//home.vue 子组件

image.png

需要注意的是: app.vue文件中clickEvent事件改变不了子组件home.vue中的title,所以引出了组合式api中的双向绑定知识ref和reactive

2.组合式api中使用

//app.vue 父组件

image.png

//home.vue 子组件

image.png

这种方法下,provide/inject 子组件中修改值,父组件也会相应修改