vue2 自定义组件如何使用v-model

一、v-model要解决的问题

在使用自定义组件时，我们有时候需要使用 v-model 来双向绑定。

二、默认使用

在vue中，v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的方法（注意，这个value的prop是需要在自定义组件内声明的），如下：

<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>

<template>
  <div>
    <p>BT</p>
    <CT v-model="num"></CT>
    <p>BTnum: {{ num }}</p>
  </div>
</template>

<script>
import CT from "./CT.vue";

export default {
  name: "BT",
  components: { CT },
  data() {
    return {
      num: 0,
    };
  },
  mounted() {},
  methods: {},
};
</script>

三、自定义使用

默认使用时，事件名input 和 prop名value是固定的，如果需要修改，就需要在子组件使用 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>

<template>
  <div>
    <p>BT</p>
    <CT v-model="num"></CT>
    <p>BTnum: {{ num }}</p>
  </div>
</template>

<script>
import CT from "./CT.vue";

export default {
  name: "BT",
  components: { CT },
  data() {
    return {
      num: 0,
    };
  },
  mounted() {},
  methods: {},
};
</script>