vue3【实用教程】v-model（原生标签和组件上使用 v-model ，v-model 参数，绑定多个 v-model ，v-model 内置修饰符，自定义 v-model 修饰符等）

在Vue 3中，v-model是一个非常有用的指令，它可以创建双向绑定。它可以用在原生HTML标签和组件上。

原生标签上使用v-model

<template>
  <input v-model="message" />
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message = ref('');
    return { message };
  }
}
</script>

组件上使用v-model

假设你有一个自定义的输入组件MyInput.vue：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
 
<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
}
</script>

你可以这样使用它：

<template>
  <MyInput v-model="message" />
</template>
 
<script>
import { ref } from 'vue';
import MyInput from './MyInput.vue';
 
export default {
  components: {
    MyInput
  },
  setup() {
    const message = ref('');
    return { message };
  }
}
</script>

v-model参数

如果你想要自定义v-model的属性名，可以使用v-model参数：

<MyInput v-model:custom-prop="message" />

在MyInput组件中，你需要监听update:custom-prop事件并定义custom-prop属性：

<script>
export default {
  props: {
    customProp: String,
  },
  emits: ['update:customProp'],
}
</script>

绑定多个v-model

你可以在一个组件实例中使用多个v-model绑定：

<template>
  <div>
    <input v-model="message1" placeholder="Message 1" />
    <input v-model="message2" placeholder="Message 2" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message1 = ref('');
    const message2 = ref('');
    return { message1, message2 };
  }
}
</script>

以上代码演示了在Vue 3中如何使用v-model进行数据双向绑定，包括在原生HTML标签和组件上的使用，以及如何通过参数自定义v-model的行为。