vue2 自定义组件使用v-model

在Vue2中，我们可以通过自定义组件来实现v-model的双向数据绑定。具体实现步骤如下：

1. 在父组件中注册子组件，并在子组件上使用v-model指令。例如，我们可以在父组件中使用<MyInput v-model="name"/>，其中name是在父组件的data中定义的变量。

2. 在子组件中，需要通过props接收父组件传递过来的value值，并通过$emit方法触发change事件来更新父组件的value值。例如，在子组件中的template模板中，可以使用<input v-bind:value="value" v-on:change="$emit('change', $event.target.value)">来实现。

3. 在父组件中，需要提供一个data属性（例如inputValue），并在子组件上绑定v-model，即<custom-input v-model="inputValue"></custom-input>。

这样，当子组件中的input值发生变化时，会触发change事件，并通过$emit方法将变化的值传递给父组件，从而实现了双向数据绑定。

需要注意的是，在Vue2.2.0及以上的版本中，可以通过配置model选项来自定义v-model的prop和event。例如，在子组件中可以使用Vue.component来定义自定义组件，然后通过model选项来配置prop和event，如下所示：

Vue.component('custom-input', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String
  },
  template: `
    <input v-bind:value="value" v-on:change="$emit('change', $event.target.value)">
  `
})

然后在父组件中使用<custom-input v-model="inputValue"></custom-input>来实现双向数据绑定。在这个例子中，输入框的值会与父组件中的inputValue变量进行双向绑定。

需要注意的是，在Vue3中，v-model配置已被移除，而是通过v-bind和v-on手动实现双向数据绑定。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2自定义组件中使用v-model](https://blog.csdn.net/weixin_38039976/article/details/116432137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [详解vue 自定义组件使用v-model 及探究其中原理](https://download.csdn.net/download/weixin_38680671/14828861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]