vue下面自定义组件使用v-model

起始v-model就是v-bind:value + 'input'事件的语法糖，使用v-model来进行双向数据绑定的时：

<input v-model="someValue">
// 等效于====>
<input v-bind:value="someValue" v-on:input="someValue=$event.target.value">

如果自定义组件的v-model要生效，就是这两点：

• 接受一个 value 属性

  props: {
  // 一定要一个value的prop
    value: {
      type: String,
      required: false
    },
  },

• 在有新的value时触发input事件

      this.$emit("input", changeInfo);

下面的例子我是基于element-ui的select，和后台接口有点查询的交互，在选择的时候，也是就是el-select发出@change事件的时候，把选中的内容发出去，这样就把自定义组件弄好了双向绑定了。

<template>
  <el-select
    style="width: 100%"
    :multiple="multiple"
    filterable
    remote
    reserve-keyword
    :placeholder="$t('inputCbuOrName')"
    :remote-method="onOutletSearch"
    :clearable="true"
    @change="handleDealerSearchChange"
    v-model="value"
  >
    <template v-if="curDealerOptions">
      <el-option
        v-for="item in curDealerOptions"
        :key="item.pkId"
        :label="`${item.cbuNo} - ${item.shortNameCn}`"
        :value="valueProp ? item[valueProp]:item"
      ></el-option>
    </template>
  </el-select>
</template>

<script>
import { searchOutlet } from "@/api/outlet";

export default {
  props: {
  // 一定要一个value的prop
    value: {
      type: String,
      required: false
    },
  },
  data() {
    //这里存放数据
    return {
    // 和后台交互查询到的下拉框列表
      curDealerOptions: []
    };
  },
  //方法集合
  methods: {
    // 和后台交互
    onOutletSearch(query) {
      if (query != "") {
        searchOutlet(query)
          .then(response => {
            this.curDealerOptions = response.data;
          })
          .catch(error => {
            console.log("outletSearch failed", error);
          });
      }
    },
    // 值变化的时候发input事件，把选中的内容发出去
    handleDealerSearchChange(changeInfo) {
      console.log("handleDealerSearchChange", changeInfo);
      this.$emit("input", changeInfo);
    }
  }
};
</script>