Vue组件中的v-model（深入解析）

在Vue中，v-model是一个双向绑定的语法糖，它会根据表单元素的类型自动选择正确的方法来更新数据。

对于输入框，v-model会利用value属性和input事件来创建双向数据绑定。

<template>
  <input v-model="message" />
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上面的例子中，v-model实现了与message数据属性的双向绑定。当message变化时，输入框的显示会更新；当用户在输入框中输入数据时，message的值也会随之更新。

对于复选框和单选按钮，v-model会分别使用checked属性和change事件来实现绑定。

<template>
  <input type="checkbox" id="checkbox" v-model="isChecked" />
  <label for="checkbox">{{ isChecked }}</label>
</template>
 
<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

在这个例子中，复选框的选中状态会与isChecked数据属性保持同步。

自定义组件中使用v-model时，需要在子组件内部使用$emit来触发事件，并在父组件中监听相应的事件来更新数据。

// 子组件
<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>
 
<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'update:value'
  }
}
</script>
 
// 父组件
<template>
  <custom-input v-model="message" />
</template>
 
<script>
import CustomInput from './CustomInput.vue'
 
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，子组件使用了$emit来发出一个update:value事件，并将输入框的当前值作为参数传递。父组件通过监听update:value事件来更新自己的message数据属性。