<template>
<input type="text" v-model="value" @input="valueChange" /><br><br>
<input type="text" v-model="keyword" /><br><br>
<a @click="test">输出</a>
</template>
<script lang="ts">
export default {
name: "subBtn"
};
</script>
<script lang="ts" setup>
const props = defineProps({
value: undefined,
keyword: undefined
})
const emit = defineEmits(['update:value'])
const valueChange = (e) => {
emit('update:value', e.target.value)
}
// const keywordChange = (e) => {
// emit('update:keyword', e.target.value)
// }
const test = ()=>{
console.log(props.value)
console.log(props.keyword)
}
</script>
<style lang="scss" scoped>
input {
border: 1px solid silver;
}
</style>
父组件
<template>
<sub-btn v-model:value="valueRef" v-model:keyword="keywordRef" />
<div>
<a @click="upd">更新</a>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import subBtn from "../sub/button.vue"
const valueRef = ref()
const keywordRef = ref()
const upd = ()=>{
valueRef.value = 'aaa';
keywordRef.value='bbb'
}
</script>
结果是：输入input1,再输入input2,再输入input1，input2值被清空
