復習：vue2祖孫傳值--依賴注入
在祖輩組件傳數(shù)據(jù)給孫輩組件痴突，使用provide將需要傳送的數(shù)據(jù)定義為依賴數(shù)據(jù)具练，孫輩使用inject接收蛋济，類似于props察绷，接到以后可以直接在模板中使用。
祖輩組件
data() {
return {
name:'lily',
age:20
}
},
provide(){
return {
name:this.name,
age:this.age
}
}
孫輩組件
inject:['name','age'],
如果需要在孫輩組件里面修改傳過來的信息术辐，需要中轉(zhuǎn)砚尽。如果在孫輩組件直接修改祖輩組件里面的信息，在孫輩組件methods里面寫自定義事件觸發(fā)辉词，然后在父組件里面接必孤，父組件里面的methods，再次觸發(fā)自定義事件瑞躺，傳給祖輩組件敷搪，這樣很麻煩。我們可以直接在祖輩組件中定義一個修改數(shù)據(jù)的方法幢哨，將這個方法也變成依賴數(shù)據(jù)傳給孫輩組件赡勘。
vue3 祖孫傳值
在祖輩組件中使用provide組合式API將數(shù)據(jù)設置為依賴數(shù)據(jù)，從此他的子組件捞镰，就可以獲取數(shù)據(jù)闸与。它有兩個參數(shù)，第一個屬性名曼振，第二個是屬性值几迄。
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ù),然后再返回出來讓模板使用
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
}
}
}
