復(fù)習(xí)：vue2祖孫傳值--依賴(lài)注入

在祖輩組件傳數(shù)據(jù)給孫輩組件，使用provide將需要傳送的數(shù)據(jù)定義為依賴(lài)數(shù)據(jù)，孫輩使用inject接收，類(lèi)似于props，接到以后可以直接在模板中使用。

祖輩組件

data() {
    return {
      name:'lily',
      age:20
    }
  },
  provide(){
    return {
      name:this.name,
      age:this.age
    }
  }

孫輩組件

 inject:['name','age'],

如果需要在孫輩組件里面修改傳過(guò)來(lái)的信息，需要中轉(zhuǎn)。如果在孫輩組件直接修改祖輩組件里面的信息，在孫輩組件methods里面寫(xiě)自定義事件觸發(fā)，然后在父組件里面接，父組件里面的methods，再次觸發(fā)自定義事件，傳給祖輩組件，這樣很麻煩。我們可以直接在祖輩組件中定義一個(gè)修改數(shù)據(jù)的方法，將這個(gè)方法也變成依賴(lài)數(shù)據(jù)傳給孫輩組件。

vue3 祖孫傳值

在祖輩組件中使用provide組合式API將數(shù)據(jù)設(shè)置為依賴(lài)數(shù)據(jù)，從此他的子組件，就可以獲取數(shù)據(jù)。它有兩個(gè)參數(shù)，第一個(gè)屬性名，第二個(gè)是屬性值。

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接收數(shù)據(jù),然后再返回出來(lái)讓模板使用

import {inject} from 'vue'
export default {
name:'SubSon',
setup() {
    let name=inject('name')
    let age=inject('age')
    return{
        name,age
    }
}

如果需要修改從祖輩傳過(guò)來(lái)的信息

 <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
    }
  }
}