vue 在自定义组件中实现v-model

本文主要涉及vue2.2版本新增的自定义组件的 v-model

下面以自定义的select组件为例

1.子组件模板代码：

<template>
  <div id="app" @click="hiddenSelection">
    <div class="form_select">
      <input
        v-model="selection"
        type="text"
        :placeholder="placeholder"
        @click="showAccountList($event)"
      />
      <img
        src="../assets/arrow-down.svg"
        :class="hasClass==='1' ? 'openlist': (hasClass==='0'?'foldlist':'')"
        @click="showAccountList($event)"
      />
      <ul v-if="isShowUserList" class="list">
        <li
          v-for="item in list"
          :key="item.value"
          :class="{'selected':item.value===value}"
          @click="changeValue(item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

2.子组件逻辑代码

<script>
export default {
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    list: {
      type: Array,
      default: () => [{
        name: '张三',
        value: 1
      }, {
        name: '李四',
        value: 2
      }]
    },
    value: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      isShowUserList: false,
      hasClass: '',
      selection: null
    }
  },
  watch: {
    value: {
      handler(val) {
        this.list.map(item => {
          if (item.value === val) {
            this.selection = item.name
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    showAccountList(e) {
      e.stopPropagation()
      this.isShowUserList = !this.isShowUserList
      if (this.isShowUserList) {
        this.hasClass = '1'
      } else {
        this.hasClass = '0'
      }
    },
    changeValue(data) {
      // 实际执行的是：this.value = data.value，不需要在父组件定义此方法
      this.$emit('changeValue', data.value)
      this.hasClass = '0'
      this.isShowUserList = false
    },
    hiddenSelection() {
      this.hasClass = '0'
      this.isShowUserList = false
    }
  }
}
</script>

子组件的关键代码为：

1. 定义双向绑定的属性value, 此属性需要在props中声明。

注：prop：双向绑定的属性名称；event：更改绑定属性的方法名

model: {
    prop: 'value',
    event: 'changeValue'
  },

2.更改双向绑定的属性值

changeValue(data) {
      // 实际执行的是：this.value = data.value，不需要在父组件定义此方法
      this.$emit('changeValue', data.value)
    },

触发changeValue方法更改value值

3. 父组件使用

   <template>
   <my-select v-model="id" :list="list"/>
   </template>
    
   <script>
   import mySelect from '../components/mySelect'
    
   export default {
     components: {
    mySelect 
     },
     data() {
    return {
      id: '',  // 选中值
      list: [] // 列表数组
    }
     }
   }
   </script>

   <input

    v-model="value"
    type="text"
    :placeholder="placeholder"
    @click="showAccountList($event)"

   />