欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3父子同信的雙向數(shù)據(jù)的項(xiàng)目實(shí)現(xiàn)

 更新時(shí)間：2023年08月08日 11:59:05   作者：weixin_47389477  
我們知道的是，父傳子的通信，和子傳父的通信，那如何實(shí)現(xiàn)父子相互通信的呢，本文就來詳細(xì)的介紹一下，感興趣的可以了解一下

前言：

我們知道的是，父傳子的通信，和子傳父的通信，那如何實(shí)現(xiàn)父子相互通信的呢？

(vue3中)v-model 和modelValue結(jié)合使用,在vue2中使用的是.sync

在父組件的寫法

<template>
<Son v-model="num" />?
</template>
<script setup>
import Son from "./children.vue"
import {ref} form 'vue'
const num = ref(0)
</script>

子組件的寫法

<template>
<div>{{modelValue}} </div>
<button @click="addNum">按鈕</button>
</template>
<script 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:val="num" /> 
</template>
<script setup>
import Son from "./children.vue"
import {ref} form 'vue'
const num = ref(0)
</script>

子組件的寫法

<template>
<div>{{num}} </div>
<button @click="addNum">按鈕</button>
</template>
<script 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>

到此這篇關(guān)于vue3父子同信的雙向數(shù)據(jù)的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3父子同信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論