仿寫elementui------select下拉框講解

1.父組件

<mia-form-item label="美食">
      <mia-select  v-model="food" :data="options" placeholder="請選擇美食">
        <mia-option label="區域一" value="shanghai"></mia-option>
        <mia-option label="區域二" value="beijing"></mia-option>
      </mia-select>
    </mia-form-item>

2.select組件（slot盛放option的代碼）

<template>
  <div class="mia-select">
    <div class="mia-input" @click="unfoldDrop">
      <input type="text" class="mia-input-inner" :placeholder="placeholder" v-model="anser.label" readonly>
      <i class="iconfont mia-drop-btn" :class="{unfold:unfold}">{{canOpenDrop ? '' : ''}}</i>
      <div class="mia-select-dropList" v-show="unfold">
        <mia-scroll height="274px">
          <ul>
            <slot></slot>
          </ul>
        </mia-scroll>
      </div>
    </div>
    <!-- msg:{{msg}} -->
  </div>
</template>

3.option組件

<template>
  <li @click="chooseSelect">{{label}}</li>
</template>

4.問題來了：option組件通過$emit只能跟父組件傳值，但是父組件里並沒有定義事件進行接受，那么我們如何將option的值傳給select呢？　　

解決：

我們知道option父組件為select，可通過遍歷其子集加事件綁定接受數據：

1）在select里添加（不知如何找子集的可以打印this.$children進行查看）：

　　getSelect(msg){
      console.log('接收',msg);
      var obj={...msg};
      this.anser=obj;
      this.$emit("input",obj.value);
    }
  },
  mounted(){
    this.$children[0].$children.forEach(child => child.$on('chooseValue',this.getSelect))
  },

2.在option里頭添加

 chooseSelect(){
      var label=this.label,value=this.value;
      console.log('發射');
      this.$emit("chooseValue",{label,value});
    }