复习：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
    }
  }
}