VUE实现自定义双向绑定组件

前言：要实现vue的双向绑定组件，我们实际上需要清楚v-model指令的实际底层交互实现。v-model实际上包含了默认属性value和默认事件input的父子组件通信过程。

下方举例说明了我的一个自定义mySelect的实现过程：

<template>
  <div class="select">
    <div class="input" @click="collapse=!collapse">
      <span v-if="currentValue">{{currentLabel||currentValue}}</span>
      <span v-else class="placeholder">{{placeholder}}</span>

      <span :class="collapse?'arrow-down':'arrow-up'"></span>
    </div>

    <div class="option-list" v-show="!collapse">
      <div class="option-item" v-for="item in data" :key="item.id" @click="chooseItem(item)">{{item[itemLabel?itemLabel:'name']}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mySelect",
    props: [
      'value',
      'placeholder',
      'data',
      'itemLabel',
      'itemValue'
    ],
    data() {
      return {
        collapse: true,
        currentValue: '',
        currentLabel: '',
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(value) {
          this.currentValue = value;
          this.$emit('input', value);
          this.data.forEach(item => {
            if (item[this.itemValue ? this.itemValue : 'id'] == value) {
              return this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
            }
          });
        }
      },
      data:{
        immediate: true,
        handler(arr) {
          if(this.value||!this.currentLabel){
            arr.forEach(item=>{
              if(item[this.itemValue ? this.itemValue : 'id'] == this.value){
                this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
                return;
              }
            })
          }
        }
      }
    },
    methods: {
      chooseItem(item) {
        if (this.currentValue !== item[this.itemValue ? this.itemValue : 'id']) {
          this.$emit('change',item[this.itemValue ? this.itemValue : 'id']);
        }
        this.currentValue = item[this.itemValue ? this.itemValue : 'id'];
        this.currentLabel = item[this.itemLabel ? this.itemLabel : 'name'];
        this.$emit('input', this.currentValue);
        this.collapse = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select {
    position: relative;

    .input {
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      border: 1px solid #02b4fe;
      border-radius: 0 3px 3px 0;
      padding-left: 10px;
      color: #666;
      position: relative;
      .placeholder {
        color: #aaa;
      }
    }

    .arrow-down {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid #02b4fe;
      position: absolute;
      right: 5px;
      top: 10px;
    }

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 8px solid #02b4fe;
      position: absolute;
      right: 5px;
      top: 10px;
    }

    .option-list {
      max-height: 200px;
      overflow-y: scroll;
      position: absolute;
      top: 2rem;
      left: 0;
      z-index: 5;
      width: 100%;
      padding: 0 5px;
      font-size: 10px;
      color: #aaa;
      background-color: #fff;
      text-align: left;
      box-shadow: 0 0 5px rgba(0, 0, 0, .1);
      border: 1px solid rgb(79, 192, 232);

      .option-item {
        text-align: center;
        line-height: 1.5rem;
      }
    }
  }
</style>

如上所示，当声明了mySelect组件之后，在项目中实际使用时，就可以如下所示直接使用：

<template>
  <mySelect v-model="testValue" placeholder="请选择" :data="testArr" item-label="id"
                      item-value="name"></mySelect>
</template>
<script>
    import mySelect from './mySelect'
    
    export default{
        components:{
          mySelect
        },
         data(){
            return {
                  testValue:'',
                  testArr:[]
             }
          },
          mounted(){
            //预置select的下拉选择基础数据，数据为对象数组，包含id和name属性
          }
}
</script> 

以上就是一个简单的自定义双向绑定组件的实现，包括简单的使用过程。在vue中的自定义组件，关于props的声明时，还是尽量使用官方建议的对象方式，可以声明属性的默认值和数据类型。我这边偷懒了用的是props的字符串数组简写方式，但是这样的话对使用组件时的错误调试不利。所以，尽量不要学我偷懒噢，亲~~~