vue使用provide、inject进行爷孙传值。代替props

1.在开发中在需要进行爷组件对孙组件进行传值时，如果使用prop进行传值，就会先通过props将爷组件的值传给爸组件，再通过爸组件传给孙组件，过程就会有点繁琐。

这时可以通过provide提供依赖以及inject注入依赖的方式进行传值。

我这里是爷组件提供一个函数，孙组件注入这个函数，就可以调用这个函数。

注：provide和inject需要在import引入后使用

//爷组件
//提供一个函数
function val(value) {
    console.log(value)
}
//使用provide
provide(/* 注入名 */ 'valFn', /* 值 */ val)

//孙组件
//使用inject注入
const jumpInject = inject('valFn',Function,true)

//在点击事件内调用注入的方法
function click(val) {
    jumpInject(val)
}

这样在爷组件的方法内就能收到传过去的val。

注：inject注入内的Function和ture代表注入的是一个函数并且代表有传入参数。

另外：还可以传入多个参数，如一个字符串和一个函数

//爷组件
//定于字符串和方法
const value = ref<string>('110')
function val() {
    console.log("方法")
}
provide('valFn',{value,val})

//孙组件
const {val,value} = inject('valFn')
//打印val和value
console.log(val,value)

下面是打印结果：

另外，如果使用响应式的话直接修改注入的值会导致爷组件内的值改变

//孙组件
const {val,value} = inject('valFn')
//改变值
value.value = '我把值更改了'