vue3之provide(提供)与inject(注入)

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