学习vue——vue2、vue3 父子相传、vue3非父子相传

一、vue3 父子相传

 

 

vue3双向绑定的父子相传

v-model="value.selectId" 就等于 v-model:modelValue="value.selectId"

 

二、vue2 父子相传

 三、vue3非父子相传

 爷爷

const name = ref(0)
// 给孙子、孙子的孙子，可传递值
provide("toMsg",name.value)

// 给孙子、孙子的孙子，提供方法
const diChange = ()=>{
  name.value ++
}
provide("diChange",diChange)  

// 给孙子的孙子，修改值（孙子不能修改）
provide("toChangeMsg",(changeVale)=>{
  name.value = changeVale
})

孙子的孙子

const toChangeMsg = inject("toChangeMsg")
const diChange = inject("diChange")
const clickFunction = ()=>{
  toChangeMsg(123)
}
const clickFunction2 = ()=>{
  diChange()
}