<template>
<div>
<!-- 无参数版本 -->
<CustomInput v-model="message" />
<div>{{ message }}</div>
<!-- 带参数版本 -->
<CustomCheckbox v-model="isChecked" value="yes" />
<div>{{ isChecked }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
import CustomCheckbox from './CustomCheckbox.vue';
const message = ref('');
const isChecked = ref(false);
</script>CustomInput.vue:
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script setup>
import { computed } from 'vue';
// 使用 props 定义一个属性，并通过 computed 实现双向绑定
const props = defineProps({
modelValue: String
});
const emit = defineEmits(['update:modelValue']);
// 使用 computed 创建一个计算属性，它将响应数据变化
const modelValue = computed({
get() {
return props.modelValue;
},
set(value) {
emit('update:modelValue', value);
}
});
</script>CustomCheckbox.vue:
<template>
<input
type="checkbox"
:checked="isModelValueChecked"
@change="$emit('update:modelValue', $event.target.checked ? checkValue : '')"
>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
modelValue: String,
checkValue: {
type: String,
default: 'true'
}
});
const emit = defineEmits(['update:modelValue']);
const isModelValueChecked = computed(() => {
return props.modelValue === props.checkValue;
});
// 使用方法来响应 change 事件，更新绑定的 modelValue
function updateModelValue(event) {
emit('update:modelValue', event.target.checked ? props.checkValue : '');
}
</script>这个例子中，我们创建了两个自定义组件 CustomInput 和 CustomCheckbox，它们都使用 v-model 来实现数据的双向绑定。CustomInput 组件接受一个 String 类型的 modelValue 属性，并通过计算属性实现双向绑定。CustomCheckbox 组件接受一个 modelValue 和一个 checkValue，后者是在 checkbox 被选中时要发送的值。当 checkbox 的状态改变时，它会发出一个自定义的 update:modelValue 事件，父组件可以监听这个事件来更新数据。