从零开始封装自己的自定义Vue组件

想要封装好一个自己的vue组件，一定要熟练掌握这三个技能

父组件 —> 子组件传值（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>