從零開始教你封裝自己的vue組件

 　　組件（component）是vue.js最強大的功能之一，它可以實現功能的復用，以及對其他邏輯的解耦。但經過一段時間的使用，我發現自己並沒有在業務中發揮出組件的最大價值。相信很多剛開始使用vue的朋友都和我有相同的狀況，在日常的開發中雖然也使用組件，但不知不覺就將組件當成了減少業務代碼長度，展現代碼結構的一種工具，並沒有做到可復用，發揮組件的長處。　

　　恰好，前幾天有一個select下拉菜單的BUG，因為原生HTML不支持修改option的樣式，所以就試着用div模擬select的同時，封裝一個獨立的組件，便於之后的復用。在做的過程中，也有些許感悟，所以總結一下拿出來和大家分享，希望對大家能有所幫助。

　　想要封裝好一個組件，一定要熟練掌握這三個技能，父組件 —> 子組件傳值（props）、子組件 —> 父組件傳值（$emit）、以及插槽（slot）；對於一個獨立的組件來說，props是用來為組件內部注入核心的內容；$emit用來使這個獨立的組件通過一些邏輯來融入其他組件中。舉個具體點的例子，假如你要做一輛車，車輪是要封裝的一個獨立組件，props指的就是根據整個車的外形你可以給輪子設置一些你想要的且符合車風格的花紋，圖案等；而$emit的作用則是讓這些輪子能夠和整輛車完美契合的運作起來。差不多就是這個意思，下面來看代碼。

首先，我們先完成div的模擬代碼——

<template>
<div class="selectWrap">
  <div class="select-wrapper">
    <div class="select" @click = "triggerOption">
      <div class="select-content">{{selectContent.text}}</div>
      <div class="triangle-wrapper">
        <div id="triangle-down"></div>
      </div>
    </div>
    <div class="option-wrapper" style="display: none;">
      <div class="option-item" v-for = "(item,index) in subject" :key="index" @mouseout="out($event)" @mouseover="move($event)" @click = "choose(item)">{{item.text}}</div>
    </div>
  </div>
</div>
</template>
<script>
  export default{
    data(){
      return{
        selectContent:{value:0,text:"小張"}, //模擬select默認選中的值
        subject:[{value:0,text:"小張"},{value:1,text:"小李"}， //模擬option中的文本和value值
                   {value:2,text:"小王"}，{value:4,text:"小明"}], 
      }
    },
    computed:{
      optionWrapper(){
        return document.querySelector(".option-wrapper");
      },
      selectCon(){
        return document.querySelector(".select-content");
      },
      subjectList(){
        return document.getElementsByClassName("option-item");
      },
    },
    methods:{
      move(event){ //模擬hover效果
        for(var item of this.subjectList){
          item.classList.remove("hover");
        }
        event.currentTarget.classList.add("hover");
      },
      out(event){
        event.currentTarget.classList.remove("hover");
      },
      triggerOption(){ //控制option的展示，以及選中后的高亮效果
        if (this.optionWrapper.style.display == "none") {
          this.optionWrapper.style.display = "block";
        }else{
          this.optionWrapper.style.display = "none";
        }
        for(var item of this.subjectList){
          if (item.innerHTML == this.selectContent.text) {
            item.classList.add("hover");
          }else{
            item.classList.remove("hover");
          }
        }
      },
      choose(item){ //選中“option”
        this.selectContent.text = item.text;
        this.optionWrapper.style.display = "none";
      }
    },
  }
</script>
<style>
  .selectWrap{ /*select的寬度*/
    width: 100px;
  }
  .select{
    position: relative;
    overflow: hidden;
    padding-right: 10px;
    min-width: 80px;
    width: 100%;
    height: 20px;
    line-height: 20px;
    border: 1px solid #000;
    cursor: default;
    font-size: 13px;
  }
  .select-content{
    text-align: left;
  }
  .triangle-wrapper{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 20px;
    background-color: #fff;
    cursor: default;
  }
  #triangle-down{
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid #000;
  }
  .option-wrapper{
    position: relative;
    overflow: hidden;
    min-width: 80px;
    width: 100%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
  }
  .option-item{
    min-width: 80px;
    height: 20px;
    line-height: 20px;
    padding-right: 10px;
    text-align: left;
    cursor: default; 
  }
  .hover{
    background-color: rgb(30,144,255);
    color:#fff !important;
  }
</style>

　　

事實上，當你完成這段代碼時，就已經完成了這一個組件。放到平時，我可能就直接把這段代碼放到業務代碼里直接用了。但既然是封裝組件，我們肯定要把它抽出來了。首先我們先要思考一下，如果我們需要把這個組件抽出來，有哪些值需要父組件提供給我們呢？？？

　　

　　相信大家一眼就能看出來，subject和selectContent這兩個data是需要父組件通過props傳進來的。但還有別的嗎？作為一個select，父組件如果只能控制內容是不是管的有點太少了？可不可以讓父組件來管理select的寬度？高度？字體大小樣式等等？答案是肯定的。父組件傳的值越多，子組件的耦合就越低。下面，我們對代碼進行微調——

<template>
   ......
</template>
<script>
  export default{
    props:["subject","selectContet"，"selectWidth”],
    mounted(){
      document.querySelector(".selectWrap").style.width = 
      this.selectWidth+"px";
    },
    computed:{
      optionWrapper(){
        return document.querySelector(".option-wrapper");
      },
      selectCon(){
        return document.querySelector(".select-content");
      },
      subjectList(){
        return document.getElementsByClassName("option-item");
      },
    },
    methods:{
      ......
      choose(item){
        this.selectContent.text = item.text;
        this.optionWrapper.style.display = "none";
      }
    },
  }
</script>
<style>
  /*.selectWrap{
    width: 100px;
  }*/
  .......
 </style>

　　

我們通過props將之前的subject和selectContent從父組件傳了進來。同時，我們還將select的寬度傳了進來，並通過mounted來設置寬度。這樣，父組件就能控制子組件的內容和一些簡單的樣式了。當然，作為一個完善的組件，我們還需要為組件設置默認值，這樣就算父組件不傳值，我們的這個組件一樣可以使用——

 

<template>
  ......
</template>
<script>
  export default{
    props:{
      selectWidth:{
        type:Number,
        default:100,
      },
      subject:{
        type:Array,
        default:function(){
          return []
        }
      },
      selectContent:{
        type:Object,
        default:function(){
          return {value:0,text:"請選擇"}
        }
      },
    },
    mounted(){
      document.querySelector(".selectWrap").style.width = this.selectWidth+"px";
    },
    ...... 
    methods:{
      ......
      choose(item){
        this.selectContent.text = item.text;
        this.optionWrapper.style.display = "none";
      }
    },
  }
</script>
<style>
  ......
</style>

　　這回我們將props用對象的方式聲明，並設置了默認值（default），假如父組件沒有設置子組件的寬度，那么我們可以使用默認的100px。這樣，我們的組件更加的完善！當然，我們的組件還有一個關鍵的功能沒有實現，就是把選中的值傳回給父組件，不然的話這個組件就沒有意義了，我們來看choose這個函數——

choose(item,value){
    this.selectContent.text = item.text;
    this.optionWrapper.style.display = "none";
    this.$emit("changeSelect",this.selectContent.text,this.selectContent.value);
}

　　這樣，我們就可以把選到的文本和value值傳給父組件了。