父
<template>
<TestCom v-model="test1" v-model:test2="test2"></TestCom>
<h1>{{test1}}測(cè)試1</h1>
<h1>{{test2}}測(cè)試2</h1>
</template>
<script setup>
import { ref, reactive } from 'vue'
const test1 = ref('')
const test2 = ref('')
</script>
子（setup語(yǔ)法糖）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-457573.html
<template>
<input v-model="message" @input="changeInfo(message)" />
<input v-model="message2" @input="changeInfo2(message2)" />
</template>
<script setup>
import { ref, watch } from 'vue';
// 此處引入
const emit = defineEmits(['update:modelValue', 'update:test2'])
const props = defineProps({
// 父組件 v-model 沒(méi)有指定參數(shù)名，則默認(rèn)是 modelValue
modelValue:{
type:String,
default: 'test'
},
test2: {
type: String,
default: 'aaa'
}
})
let message = ref('123')
let message2 = ref('456')
// 因?yàn)閜rops.modelValue、props.test2是非引用類(lèi)型，改變時(shí)，需要監(jiān)聽(tīng)，對(duì)響應(yīng)式數(shù)據(jù)重新賦值
watch(()=> props.modelValue,() => {message.value = props.modelValue})
watch(()=> props.test2,() => {message2.value = props.test2})
// 數(shù)據(jù)雙向綁定
const changeInfo = (info) => {
emit('update:modelValue', info)
}
const changeInfo2 = (info2) => {
emit('update:test2', info2)
}
</script>
子（常規(guī)寫(xiě)法）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-457573.html
<script>
import { ref, watch } from 'vue';
export default {
props: {
// 父組件 v-model 沒(méi)有指定參數(shù)名，則默認(rèn)是 modelValue
modelValue:{
type:String,
default: 'test'
},
test2: {
type: String,
default: 'aaa'
}
},
setup(props, { emit }) {
let message = ref('123')
let message2 = ref('456')
// 因?yàn)閜rops.modelValue、props.test2是非引用類(lèi)型，改變時(shí)，需要監(jiān)聽(tīng)，對(duì)響應(yīng)式數(shù)據(jù)重新賦值
watch(()=> props.modelValue,() => {message.value = props.modelValue})
watch(()=> props.test2,() => {message2.value = props.test2})
// 數(shù)據(jù)雙向綁定
const changeInfo = (info) => {
emit('update:modelValue', info)
}
const changeInfo2 = (info2) => {
emit('update:test2', info2)
}
return {
message, message2, changeInfo, changeInfo2
}
}
}
</script>
到了這里，關(guān)于vue3中emit(‘update:modelValue‘)使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
