vue3.2 v-model 双向数据绑定实现

代码实现示例

• 子组件 实现双向绑定

<template>
    <div class="component-name">
        <input type="text" :value="modelValue" @input="handleChange" />
    </div>
</template>

<script setup lang="ts">
const props = defineProps(['modelValue']);

const emit = defineEmits(['update:modelValue']);

const modelValue = computed(() => props.modelValue);

function handleChange(event) {
    emit('update:modelValue', event.target.value);
}
</script>

• 父组件使用

<template>
    <div class="component-name">
        <Child v-model="myInputvalue" />
        {{ myInputvalue }}
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Child from './components/child.vue';

const myInputvalue = ref<string>(''); // 可以根据需要调整类型
</script>

<style lang="scss" scoped>
.component-name {
    // 在这里添加你的样式
}
</style>

也可以写成下面方式

modelValue 是默认的v-model 变量名，可以改成其他的，都是其他需要具体写出v-model:params 这样子形式。