Vue3中如何使用v-model高級(jí)用法參數(shù)綁定傳值
更新時(shí)間：2023年10月16日 11:04:06 作者：*鄭*
本文給大家介紹Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的相關(guān)知識(shí),包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值
單個(gè)輸入框傳值
App.vue
<template>
<p>{{firstName}}</p>
<hello-world v-model="firstName"></hello-world>
</template>
<script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const firstName = ref('firstName');
</script>HelloWorld.vue
<template>
<input type="text"
:value="modelValue"
@input="$emit('update:modelValue',$event.target.value)">
</template>
<script setup>
defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);
</script>
多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值
App.vue
<template>
<p>{{firstName}}</p>
<p>{{lastName}}</p>
<hello-world v-model:firstName="firstName" v-model:lastName="lastName"></hello-world>
</template>
<script setup>
import {ref} from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const firstName = ref('firstName');
const lastName = ref("lastName");
</script>HelloWorld.vue
<template>
<input type="text"
:value="firstName"
@input="$emit('update:firstName',$event.target.value)"/><br/>
<input type="text"
:value="lastName"
@input="$emit('update:lastName',$event.target.value)"/>
</template>
<script setup>
defineProps(["firstName","lastName"]);
defineEmits(["update:firstName","update:lastName"]);
</script>到此這篇關(guān)于Vue3中使用v-model高級(jí)用法參數(shù)綁定傳值的文章就介紹到這了,更多相關(guān)Vue3使用v-model內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中form表單禁用專(zhuān)用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
解決在el-dialog中無(wú)法正確獲取DOM的問(wèn)題
這篇文章主要介紹了解決在el-dialog中無(wú)法正確獲取DOM的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例
這篇文章主要介紹了vue實(shí)現(xiàn)簡(jiǎn)易圖片左右旋轉(zhuǎn),上一張,下一張組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2017-02-02
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+springboot用戶(hù)注銷(xiāo)功能實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+springboot用戶(hù)注銷(xiāo)功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05