vue3之provide(提供)与inject(注入)
作用: 一个组件往往嵌套这更多的子组件,而这些子组件也许还有他们各自的子孙组件,这时如果我们还使用props方式来传值可能太过复杂和不利于维护,而这两个api就提供了更方便的传值方式,无论你的组件嵌套有多深,只要你在父组件定义了provide,那么在子孙组件调用inject就可拿到provide所在父组件定义的值,所以他们是成对出现使用// 父组件import { ref,provide } fr
·
作用: 一个组件往往嵌套这更多的子组件,而这些子组件也许还有他们各自的子孙组件,这时如果我们还使用props方式来传值可能太过复杂和不利于维护,而这两个api就提供了更方便的传值方式,无论你的组件嵌套有多深,只要你在父组件定义了provide,那么在子孙组件调用inject就可拿到provide所在父组件定义的值,所以他们是成对出现
使用
// 父组件
import { ref,provide } from 'vue';
// provide()接受两参数(name: string,data: 传递的数据)
setup(){
let init = ref(1);
function change(){
init.value += 1
}
provide('init',init)
provide('update',change) // 数据响应式的关键,修改数据的方法也要一应传递下去,否则会不响应
return {
change,init
}
}
// 子组件
import { inject,readonly } from 'vue';
// inject()接收两个参数(name: 要接受provide的name,data: 可不填,默认的数据)
setup(){
const oneInit = inject('init') // 接收上方传递下来的数据
const updateUser = inject('updatea1',readonly(oneInit))
// 接收方法,readonly只读,以免外在原因修改了数据
return {
oneInit,
updateUser
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)