实战篇 vue3 中的 v-model 详细解答

前言

在 Vue 3 中，v-model 的工作机制允许你自定义 prop 和 event 名称，默认情况下，v-model 在子组件上会绑定到 modelValue prop 并监听 update:modelValue 事件。这意味着当你在父组件中使用 v-model 时，实际上是在传递 modelValue 这个 prop 并监听 update:modelValue 事件来实现双向数据绑定，以下为实战代码。

关键点解释

1. v-model 的默认行为：

   • 默认情况下，v-model 在子组件上相当于传递了一个名为 modelValue 的 prop，并监听一个名为 update:modelValue 的事件。
   • 如果你在子组件中使用了不同于 modelValue 的 prop 名称（例如 value 或其他名称），你需要通过 .sync 修饰符或显式地绑定 prop 和事件来实现类似 v-model 的功能。

2. 你的代码中的 modelValue：

   • 在你的 <MyPopup> 子组件中，你定义了一个名为 modelValue 的 prop，并且在计算属性 visible 中使用它来控制弹出层的显示状态。
   • 父组件中通过 v-model="isPopupVisible" 绑定到这个 modelValue prop，并且通过 update:modelValue 事件更新 isPopupVisible 的值。

示例说明

子组件 <MyPopup>

vue
深色版本
<template>
  <van-popup v-model:show="visible" position="bottom" :style="{ maxHeight: `${maxHeight}px`, overflow: 'hidden' }">
    <!-- 其他模板内容 -->
  </van-popup>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue';
import { Popup } from 'vant';

// 定义属性
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  options: {
    type: Array,
    required: true,
  },
  maxHeight: {
    type: Number,
    default: 400,
  },
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

// 控制弹框显示状态
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
// 其他逻辑...
</script>

父组件

vue
深色版本
<template>
  <div>
    <button @click="togglePopup">打开弹窗</button>
    <MyPopup 
      v-model="isPopupVisible" 
      title="远程设置"
      :options="optionsList"
      :maxHeight="400"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MyPopup from './path/to/MyPopup.vue'; // 替换为实际路径

const isPopupVisible = ref(false);
const optionsList = [
  { label: '选项一', selected: false },
  { label: '选项二', selected: true },
];

const togglePopup = () => {
  isPopupVisible.value = !isPopupVisible.value;
};

const handleConfirm = (selectedOption) => {
  console.log('确认选择:', selectedOption);
  isPopupVisible.value = false; // 关闭弹窗
};

const handleCancel = () => {
  console.log('取消选择');
  isPopupVisible.value = false; // 关闭弹窗
};
</script>

modelValue 是否是关键字？

• 不是严格意义上的关键字 ：在 Vue 中，modelValue 不是一个严格意义上的关键字，而是一个约定俗成的命名方式。Vue 3 的 v-model 默认期望子组件有一个名为 modelValue 的 prop 和一个名为 update:modelValue 的事件。

• 可以自定义 ：如果你希望使用不同的 prop 名称和事件名，你可以通过在 v-model 上指定参数来改变这种默认行为。例如：

  vue
  深色版本
  <MyComponent v-model:customPropName="parentData" />

  在这种情况下，子组件需要接收 customPropName 作为 prop，并发出 update:customPropName 事件来更新父组件的数据。

总结

在你的例子中，modelValue 是用来配合 v-model 实现双向数据绑定的标准命名方式，而不是 Vue 内置的关键字。Vue 3 中 v-model 默认使用 modelValue 作为 prop 名称并监听 update:modelValue 事件来实现双向数据绑定。因此，虽然 modelValue 不是 Vue 的关键字，但它是 v-model 默认使用的约定，遵循这一约定可以使代码更加简洁和直观。如果需要，你可以根据需求更改这些名称以适应特定的应用场景。