vue3 自定义 v-model（无参数和带参数）【setup版】（两种方案）

这篇文章距离上次修改已过261天，其中的内容可能已经有所变动。

<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 事件，父组件可以监听这个事件来更新数据。

vue3 自定义 v-model（无参数和带参数）【setup版】（两种方案）

评论已关闭

推荐阅读