起始v-model就是v-bind:value + 'input'事件的語法糖，使用v-model來進行雙向數(shù)據(jù)綁定的時：

<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時觸發(fā)input事件

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

下面的例子我是基于element-ui的select，和后臺接口有點查詢的交互，在選擇的時候，也是就是el-select發(fā)出@change事件的時候，把選中的內容發(fā)出去，這樣就把自定義組件弄好了雙向綁定了。

<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() {
    //這里存放數(shù)據(jù)
    return {
    // 和后臺交互查詢到的下拉框列表
      curDealerOptions: []
    };
  },
  //方法集合
  methods: {
    // 和后臺交互
    onOutletSearch(query) {
      if (query != "") {
        searchOutlet(query)
          .then(response => {
            this.curDealerOptions = response.data;
          })
          .catch(error => {
            console.log("outletSearch failed", error);
          });
      }
    },
    // 值變化的時候發(fā)input事件，把選中的內容發(fā)出去
    handleDealerSearchChange(changeInfo) {
      console.log("handleDealerSearchChange", changeInfo);
      this.$emit("input", changeInfo);
    }
  }
};
</script>