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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了基于Vue實(shí)現(xiàn)微前端的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式
這篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(二)導(dǎo)入bootstrap樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
解決elementui中NavMenu導(dǎo)航菜單高亮問題(解決多種情況)
這篇文章主要介紹了解決elementui中NavMenu?導(dǎo)航菜單高亮問題(解決多種情況)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is
本文主要介紹了Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is not available，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
基于Vue3+TypeScript實(shí)現(xiàn)防止支付密碼被瀏覽器保存功能
最近做 PC 端支付功能,輸入支付密碼的時(shí)候,Chrome 彈了個(gè)是否保存密碼？說實(shí)話,這功能擱登錄場景,確實(shí)挺方便, 但支付密碼？說難聽點(diǎn),萬一用戶真保存了,自己都忘了,或者電腦不是自己的,密碼直接暴露,所以本文給大家介紹了利用Vue3實(shí)現(xiàn)防止支付密碼被瀏覽器保存功能2025-07-07
Vue項(xiàng)目中props傳值時(shí)子組件檢測不到的問題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測不到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個(gè)函數(shù)來返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了Electron-store本地存儲(chǔ)功能的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個(gè)樣式出現(xiàn)時(shí)，就會(huì)導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08