vue3从精通到入门20：v-model使用

v-model 是一个用于在表单输入元素和组件之间进行双向数据绑定的指令。它简化了在父组件和子组件之间同步数据的过程，特别是在处理表单输入时。

基本用法

在模板中，v-model 通常与表单输入元素（如 <input>、<textarea> 或 <select>）一起使用，它将输入元素的值与组件的某个 data 属性进行双向绑定。

<template>  
  <form>  
    <input v-model="message" placeholder="edit me">  
    <p>Message is: {{ message }}</p>  
  </form>  
</template>  
  
<script setup lang="ts">  
import { ref } from 'vue';  
  
const message = ref('');  
</script>

在这个例子中，message 是一个响应式引用（ref），它与 <input> 元素的值进行双向绑定。当用户在输入框中键入时，message 的值会自动更新，反之亦然。

自定义组件中的 v-model 

v-model 的工作方式有所改变，它现在基于 modelValue 作为 prop 和 update:modelValue 作为事件。这使得 v-model 在自定义组件中更加灵活和可配置。

下面是一个自定义输入框组件的例子，它使用 v-model 进行双向数据绑定：

<template>  
  <input  
    :value="modelValue"  
    @input="updateValue($event.target.value)"  
    type="text"  
    placeholder="Custom Input"  
  />  
</template>  
  
<script setup lang="ts">  
import { defineProps, defineEmits } from 'vue';  
  
const props = defineProps({  
  modelValue: {  
    type: String,  
    default: ''  
  }  
});  
  
const emit = defineEmits(['update:modelValue']);  
  
const updateValue = (value: string) => {  
  emit('update:modelValue', value);  
};  
</script>

在这个自定义组件中，我们定义了一个 modelValue prop 来接收父组件传递的值，并使用 update:modelValue 事件来通知父组件值的变化。当输入框的值发生变化时，我们调用 updateValue 方法并触发 update:modelValue 事件，将新的值传递给父组件。

在父组件中使用自定义组件的 v-model

现在，我们可以在父组件中使用这个自定义输入框组件，并使用 v-model 进行双向数据绑定：

<template>  
  <CustomInput v-model="customMessage" />  
  <p>Custom message is: {{ customMessage }}</p>  
</template>  
  
<script setup lang="ts">  
import { ref } from 'vue';  
import CustomInput from './CustomInput.vue';  
  
const customMessage = ref('');  
</script>

在这个父组件中，我们引入了 CustomInput 组件，并使用 v-model 将 customMessage 与组件的 modelValue 进行绑定。当用户在自定义输入框中键入时，customMessage 的值会自动更新，反之亦然。

注意事项

• v-model 默认使用 value 作为 prop 和 input 作为事件，但在自定义组件中，你可以使用 modelValue 作为 prop 和 update:modelValue 作为事件来替代它们。
• v-model 也可以用于处理数组或对象等复杂数据类型，但你需要确保在自定义组件中正确处理这些类型的更新。
• 在处理表单验证或复杂逻辑时，可能需要结合使用 watch 或计算属性来监听 v-model 绑定的值的变化。