vue中的自定义组件如何使用v-model

<input type="text" v-model="inputValue" />

以上等效于：

<input
  type="text"
  v-bind:value="inputValue"
  v-on:input="inputValue=$event.target.value"
/>

使用v-model实际上是传递一个自定义属性value和自定义事件input给子组件，子组件接收value值，同时通过input事件传递参数给父组件；
自定义组件中使用了v-model，默认自定义属性名是value，自定义事件名是input，下面看看子组件是如何接收和传递参数给父组件的：

<template>
  <div>
    <input type="text" v-model="value" @change="inputChange"/>
  </div>
</template>

<script>
export default {
  props: {
    value: { // 父组件传递过来的value
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    inputChange(val) {
      this.$emit('input', val) // 通过调用父组件的input事件来传递值
    }
  }
}
</script>

如果想要改变默认的自定义属性名和自定义事件名就要使用model属性了：

  model: {
    prop: 'selectValue', // 自定义属性名
    event: 'myEvent' // 自定义事件名
  },

所以prop接收的时候就变成了以下这样：

  props: {
    selectValue: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  
  // 调用事件的时候传递参数
  this.$emit('myEvent', val)

下面是做的一个小案例：
父组件：

<template>
  <div class="container">
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="setValue">模拟接口赋值</el-button>
      <el-button type="primary" @click="getValue">看看拿到的值</el-button>
    </div>
    <Myselect v-model="selectValue" />
  </div>
</template>

<script>
import Myselect from '@/components/Myselect.vue'
export default {
  components: {
    Myselect
  },
  data() {
    return {
      selectValue: ''
    }
  },
  methods: {
    setValue() {
      setTimeout(() => {
        this.selectValue = '选项4'
      }, 100);
    },
    getValue() {
      alert('v-model的值为：' + this.selectValue)
    }
  }
}
</script>

子组件：

<template>
  <div>
    <el-select
      v-model="mySelectValue"
      placeholder="请选择"
      @change="selectChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'selectValue',
    event: 'myEvent'
  },
  props: {
    selectValue: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  computed: {
    mySelectValue: {
      get() {
        return this.selectValue
      },
      set(v) { }
    }
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    selectChange(val) {
      this.$emit('myEvent', val)
    }
  }
}
</script>

下面说下computed的使用方式：

1. 第一种：函数形式

  computed: {
    mySelectValue() {
        return this.selectValue
    }
  }

以上的形式用在案例中是会报错的，因为mySelectValue是用在v-model上的，也就是会修改mySelectValue的值，函数形式的写法是只读而不能修改的，否则会报错；

2. 第二种：对象形式

  mySelectValue: {
    get() {
      return this.selectValue
    },
    set(v) { }
  }

对象形式定义的属性，允许修改，不会报错；