Vue3中如何使用v-model高級用法參數綁定傳值
更新時間：2023年10月16日 11:04:06 作者：*鄭*
本文給大家介紹Vue3中使用v-model高級用法參數綁定傳值的相關知識,包括單個輸入框傳值和多個輸入框傳值,一個組件接受多個v-model值,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
Vue3中使用v-model高級用法參數綁定傳值
單個輸入框傳值
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>
多個輸入框傳值,一個組件接受多個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>到此這篇關于Vue3中使用v-model高級用法參數綁定傳值的文章就介紹到這了,更多相關Vue3使用v-model內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue.js+HighCharts實現動態(tài)請求展示時序數據
這篇文章主要為大家詳細介紹了Vue.js+HighCharts實現動態(tài)請求展示時序數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了Vue路由跳轉與接收參數的實現方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue實現簡易圖片左右旋轉,上一張,下一張組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了利用Vue-Router實現頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
Vue中使用event的坑及解決event is not defined
這篇文章主要介紹了Vue中使用event的坑及解決event is not defined,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue+springboot用戶注銷功能,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05