Vue3中如何使用v-model高级用法参数绑定传值
作者：*郑*
本文给大家介绍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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！