无锡网站优化建站,局网站建设合同,胶州网站建设dch100,广州有网站建设学校前言#xff1a;
我们知道的是#xff0c;父传子的通信#xff0c;和子传父的通信#xff0c;那如何实现父子相互通信的呢#xff1f;
(vue3中)v-model 和modelValue结合使用,在vue2中使用的是.sync 在父组件的写法 template
Son v-modelnum /
我们知道的是父传子的通信和子传父的通信那如何实现父子相互通信的呢
(vue3中)v-model 和modelValue结合使用,在vue2中使用的是.sync 在父组件的写法 template
Son v-modelnum / /template
script setup
import Son from ./children.vue
import {ref} form vue
const num ref(0)/script 子组件的写法 template
div{{modelValue}} /div
button clickaddNum按钮/button
/templatescript setup
const props difineProps({
modelValue:Number
})
const emit difineEmit([update:modelValue])
const addNum (){
emit(update:modelValue,modelValue)
}/script另一种是在父组件中v-model:XX,在子组件中用XX 在父组件的写法 template
Son v-model:valnum /
/template
script setup
import Son from ./children.vue
import {ref} form vue
const num ref(0)
/script 子组件的写法 template
div{{num}} /div
button clickaddNum按钮/button
/templatescript setup
import {ref} form vue
const props difineProps({
val:Number
})
const num ref(props.val)const emit difineEmit([update:val])
const addNum (){
emit(update:val,num)
}
/script
