复习：vue2祖孙传值--依赖注入
在祖辈组件传数据给孙辈组件，使用provide将需要传送的数据定义为依赖数据，孙辈使用inject接收，类似于props，接到以后可以直接在模板中使用。
祖辈组件
data() {
return {
name:'lily',
age:20
}
},
provide(){
return {
name:this.name,
age:this.age
}
}
孙辈组件
inject:['name','age'],
如果需要在孙辈组件里面修改传过来的信息，需要中转。如果在孙辈组件直接修改祖辈组件里面的信息，在孙辈组件methods里面写自定义事件触发，然后在父组件里面接，父组件里面的methods，再次触发自定义事件，传给祖辈组件，这样很麻烦。我们可以直接在祖辈组件中定义一个修改数据的方法，将这个方法也变成依赖数据传给孙辈组件。
vue3 祖孙传值
在祖辈组件中使用provide组合式API将数据设置为依赖数据，从此他的子组件，就可以获取数据。它有两个参数，第一个属性名，第二个是属性值。
import{ref,provide} from 'vue'
export default {
name: 'App',
setup() {
let name=ref('lily')
let age=ref(20)
provide('name',name)
provide('age',age)
return{
name,age
}
}
}
然后孙辈组件用inject接收数据,然后再返回出来让模板使用
import {inject} from 'vue'
export default {
name:'SubSon',
setup() {
let name=inject('name')
let age=inject('age')
return{
name,age
}
}
如果需要修改从祖辈传过来的信息
<button @click="update">修改信息</button>
export default {
name:'SubSon',
setup() {
let name=inject('name')
let age=inject('age')
let update=()=>{
name.value="hello"
age.value=23
}
return{
name,age,update
}
}
}
