想要封装好一个自己的vue组件，一定要熟练掌握这三个技能
父组件 —> 子组件传值（props）
子组件 —> 父组件传值（$emit）
以及插槽（slot）
对于一个独立的组件来说
props是用来为组件内部注入核心的内容；
$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。
举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；
而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。差不多就是这个意思
下面来看代码。
首先，我们先完成div的模拟代码
<template> <div> <div> <div @click = "triggerOption"> <div>{{selectContent.text}}</div> <div> <div></div> </div> </div> <div> <div 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>