vue2自定义组件的v-model

在Vue2中，自定义组件的v-model是通过`model`选项来实现的。在组件中，可以使用`model`选项来指定需要传递的`prop`和触发的事件。这样，在使用组件时，我们可以直接使用`v-model`来进行双向绑定。

有两种常见的方式来定义自定义组件的v-model：

1. 默认情况下，v-model会默认传递一个名为`value`的`prop`和一个名为`input`的事件。我们只需要在自定义组件内声明一个`value`的`prop`，然后在组件中使用`this.$emit('input', value)`来触发`input`事件，即可实现双向绑定。示例代码如下：

<template>
  <div>
    <p><a @click="click()">add</a></p>
    <p>CTnum: {{ num }}</p>
  </div>
</template>

<script>
export default {
  name: "CT",
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      num: this.value,
    };
  },
  mounted() {},
  methods: {
    click() {
      this.num++;
      this.$emit("input", this.num);
    },
  },
};
</script>

2. 如果希望修改默认的`prop`和事件名，可以使用`model`选项。在组件中，我们可以通过在`model`选项中指定`prop`和事件名来自定义v-model的行为。示例代码如下：

<template>
  <div>
    <p><a @click="click()">add</a></p>
    <p>CTnum: {{ num }}</p>
  </div>
</template>

<script>
export default {
  name: "CT",
  model: {
    prop: 'modelvalue',
    event: 'change'
  },
  props: {
    modelvalue: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      num: this.modelvalue,
    };
  },
  mounted() {},
  methods: {
    click() {
      this.num++;
      this.$emit("change", this.num);
    },
  },
};
</script>

以上是Vue2中自定义组件的v-model的两种常见用法。无论是默认传递的`value`和`input`，还是通过`model`选项自定义的，都可以实现双向绑定的效果。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [vue2 自定义组件如何使用v-model](https://blog.csdn.net/letianxf/article/details/128429039)[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_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]