Vue3中如何使用v-model高級用法參數(shù)綁定傳值
更新時(shí)間：2023年10月16日 11:04:06 作者：*鄭*
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關(guān)知識,包括單個(gè)輸入框傳值和多個(gè)輸入框傳值,一個(gè)組件接受多個(gè)v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
Vue3中使用v-model高級用法參數(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高級用法參數(shù)綁定傳值的文章就介紹到這了,更多相關(guān)Vue3使用v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用mint-ui實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級聯(lián)動效果的示例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Vue全局loading及錯(cuò)誤提示的思路與實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文主要介紹了vue使用axios接收流文件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽交換位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue組件定義，全局、局部組件，配合模板及動態(tài)組件功能示例
這篇文章主要介紹了vue組件定義，全局、局部組件，配合模板及動態(tài)組件功能,結(jié)合實(shí)例形式分析了vue.js中組件的定義、全局組件、局部組件、配合模板組件及動態(tài)組件的相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
這篇文章主要給大家介紹了關(guān)于vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue-cli3 從搭建到優(yōu)化的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來了第一個(gè)小案例,todoList是非常常見地一個(gè)小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個(gè)todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下2022-10-10