vue中内置指令v-model的作用和常见使用方法介绍以及在自定义组件上支持

v-model 是 Vue.js 中一个非常重要的指令，它用于创建数据与视图之间的双向绑定。在表单元素（如 input, textarea, select）上创建双向绑定，可以实现状态的自动同步。

在使用 v-model 时，它会根据表单元素类型自动选取正确的方法来更新元素的值。

以下是一些使用 v-model 的示例：

1. 在输入框中使用 v-model 创建双向数据绑定：

<template>
  <div>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个例子中，输入框的值与数据 message 双向绑定，所以无论 message 如何变化，输入框的值都会更新，反之亦然。

2. 在复选框中使用 v-model 创建绑定：

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

在这个例子中，复选框的选中状态与数据 checked 双向绑定。

3. 在选择列表中使用 v-model 创建绑定：

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">请选择一个选项</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>选中的是: {{ selected }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

在这个例子中，选择列表的选中项与数据 selected 双向绑定。

在自定义组件上使用 v-model，你需要在子组件中使用 model 选项来定义如何通过 prop 和事件实现数据的双向绑定。

例如：

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>Message is: {{ message }}</p>
  </div>
</template>
 
<script>
import CustomInput from './CustomInput.vue';
 
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在自定义输入组件 CustomInput.vue 中：

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

在这个例子中，CustomInput 组件通过 v-model 接收一个名为 value 的 prop，并且当输入框的值发生变化时，它会发出一个自定义的 update:value 事件，将新的值作为参数。

这样，无论 message 如何变化，CustomInput 组件