vue 自定义组件 v-model

​

适用场景

    自定义组件或使用第三方组件是，期望使用 v-model 的时候。

快速开始

组件调用

    <!-- 简写 -->
    <mychange v-model="testValue" />
    
    <!-- 两种效果一致 -->

    <!-- 原始写法 -->
	<mychange :value="testValueObj" @input="value => testValueObj = value" />
    

data() {
   return {
     testValue: '22',
     testValueObj: { name: '', age: 0 },
   }
 }
  

自定义组件(mychange.vue)

<template>
  <div>
    <select name="testName" @change="onChange">
      <option value="11" :selected="'11' === childrenValue">aa</option>
      <option value="22" :selected="'22' === childrenValue">bb</option>
    </select>
  </div>
</template>
<script>
export default {
  name: 'Mychange',
  props: {
    value: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      childrenValue: this.value
    }
  },
  methods: {
    // 选择变更
    onChange(ev) {
      this.childrenValue = ev.currentTarget.value
      this.$emit('input', this.childrenValue)
    },
  }
}
</script>

<style scoped>
</style>

​