作用: 一个组件往往嵌套这更多的子组件,而这些子组件也许还有他们各自的子孙组件,这时如果我们还使用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
        }
}
Logo

前往低代码交流专区

更多推荐