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

当你开发自定义组件，并想针对组件创建一个双向绑定 (v-model)，那么这篇文章就是为你准备的。

Vue.js 提供了一种非常灵活的方式来创建自定义组件，并支持 v-model 绑定到组件上。

通常情况下，我们在组件内部使用 props 来接收父组件传递的数据，然后使用事件来更新来自父组件的数据。这种方式下，使用 v-model 可能会感觉有点麻烦。因为 v-model 隐式地编译成两个 v-bind 和 v-on，其中一个值绑定到了 value 属性上，另一个侦听 input 事件并将用户输入的值用 $emit 抛出。

但是，当你使用 Vue.component 创建一个具有单个 v-model prop 的组件时，Vue.js 会自动生成上述代码。下面我们就以一个单选框为例来看看如何实现在自定义组件中使用 v-model。

单选框组件

以下是一个基本的单选框组件，它有一个单选框列表和一个 model prop。根据 model 值渲染不同的样式。

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <input type="radio" :id="option.value" :value="option.value" v-model="selectedValue">
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected: {{ selectedValue }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      model: {
        type: String,
        required: true
      },
      options: {
        type: Array,
        required: true
      }
    },
    computed: {
      selectedValue: {
        get() {
          return this.model
        },
        set(value) {
          this.$emit('update:model', value)
        }
      }
    }
  }
</script>

在模板中，我们使用了 v-for 来遍历选项数组，并使用 v-model 来绑定选中的值到 selectedValue 上。在 computed 属性中，我们将 selectedValue 的 getter 方法定义为 this.model，并将 setter 计算属性处理为 $emit 解决方案，以便父组件更改它。

使用单选框组件

下面是如何使用单选框组件，通过 v-model 来实现数据双向绑定：

<template>
  <div>
    <checkboxes v-model="selectedOption" :options="options"></checkboxes>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
  import Checkboxes from './Checkboxes.vue'

  export default {
    components: {
      Checkboxes
    },
    data() {
      return {
        options: [
          { label: 'JavaScript', value: 'js' },
          { label: 'HTML', value: 'html' },
          { label: 'CSS', value: 'css' },
        ],
        selectedOption: ''
      }
    }
  }
</script>

通过将 v-model 绑定到 selectedOption 上，我们让它成为单选框组件的 model prop。因为这是一个双向绑定，所以当我们在单选框组件中改变选项时，selectedOption 的值也会跟着改变。

这就是在自定义组件中使用 v-model 的基础。不难看出，使用 v-model 创建双向绑定很方便，但有时候你只需要简单的 props 和 events，使用 v-model 会使代码变得更加不直观。所以在使用时需要考虑清楚何时使用 v-model。