Vue自定义组件的v-model例子

• 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框或者其他自定义组件等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突

例子

父组件

<template>
  <div>
    <div>父元素的formData.msg--- {{ formData.msg }}</div>
    <button @click="test">父元素的formData.msg+1</button>
    <son v-model="formData.msg"></son>
  </div>
</template>
<script>
import son from "./son.vue";
export default {
  components: { son },
  data() {
    return {
      formData: {
        msg: 1,
      },
    };
  },
  methods: {
    test() {
      this.formData.msg++;
    },
  },
};
</script>

子组件

<template>
  <div>
    <hr />
    <div>这里是子元素</div>
    <div>子元素的msg--- {{ msg }}</div>
    <button @click="onClick">子元素的msg-1</button>
  </div>
</template>
<script>
export default {
  name: "son",
  props: {
    msg: {
      type: Number,
    },
  },
  data(){
    return {
      sonMsg: this.msg
    }
  },
  model: {
    prop: "msg",
    event: "change",
  },
  methods: {
    onClick() {
      // 注意不能直接修改父元素的props
      this.sonMsg--;
      this.$emit("change", this.sonMsg);
    },
  },
};
</script>