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)文章
這篇文章主要介紹了vue3中如何使用iframe嵌入vue2頁面問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題
今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了el-tooltip根據(jù)條件控制顯示的示例代碼,包括列表型和樹狀圖型,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
前端vue如何根據(jù)菜單自動(dòng)生成路由(動(dòng)態(tài)配置前端路由)
估計(jì)有不少人遇過這樣的需求:根據(jù)后臺(tái)數(shù)據(jù)動(dòng)態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于前端vue如何根據(jù)菜單自動(dòng)生成路由的相關(guān)資料,需要的朋友可以參考下2024-04-04
混入(mixin)是一種非常靈活的方式,用來分發(fā)Vue組件中可復(fù)用的功能,一個(gè)混入對(duì)象可以包含任意組件選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue混入和繼承的相關(guān)資料,需要的朋友可以參考下2021-09-09
使用proxytable 配置解決 vue-cli 的跨域請(qǐng)求問題【推薦】
這篇文章主要介紹了利用 proxytable 配置解決 vue-cli 的跨域請(qǐng)求問題,本文的目錄結(jié)構(gòu)基于 webpack 模板結(jié)構(gòu)，需要的朋友可以參考下2018-05-05
vue composition-api 封裝組合式函數(shù)的操作方法
在 Vue 應(yīng)用的概念中，“組合式函數(shù)”(Composables) 是一個(gè)利用 Vue 的組合式 API 來封裝和復(fù)用有狀態(tài)邏輯的函數(shù)，這篇文章主要介紹了vue composition-api 封裝組合式函數(shù)的操作方法,需要的朋友可以參考下2022-10-10
Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果
這篇文章主要介紹了Vue render渲染時(shí)間戳轉(zhuǎn)時(shí)間,時(shí)間轉(zhuǎn)時(shí)間戳及渲染進(jìn)度條效果,通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
項(xiàng)目中Axios二次封裝實(shí)例Demo
vue項(xiàng)目經(jīng)常會(huì)用到axios來請(qǐng)求數(shù)據(jù),那么首先肯定需要對(duì)這個(gè)請(qǐng)求方法進(jìn)行一個(gè)二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06