如何使用Vue封装Select下拉组件

<template>
  <div class="sel">
      <ul>
        <li v-for="(e,i) in list" :key="i" 
          @click="save(e.title,e.id)"
          // 设置样式 三目运算符
          :class="active===e.id?'active':''"
        >
          <p>{{e.title}}</p>
        </li>
        <button @click="del()">关闭</button>
      </ul>
      
  </div>
</template>

<script>
export default {
 props:["list"], // 接收调用封装组件传来的数据 
 data()
 {
   return{
     active:this.list[0].id, // 如果点击关闭没选择 默认第一个 （一年级）
     title:'', // 选择的 title
     id:'' // 选择的 id
   }
 },
 methods:{
 // 当点击元素时
   save(title,id)
   {
     this.title=title;
     this.id=id

     this.active=id;
     //console.log(title)
     console.log("在封装的组件里面点击了"+title)
     this.$emit("fun",title,false) 
     // 使用 $emit 派发事件 让父组件去触发
   },
   // 点击关闭时 逻辑一样 但需要注意的是 如果选择过后关闭后发送给其父组件选择的数据，
   // 如果没有选择，则对应的是默认的一年级
   del()
   {
     if(this.active!=this.list[0].id)
     {
        this.save(this.title,this.id)
     }
     else
     {
       //  关闭让他默认显示一年级
        console.log("点击了关闭按钮,默认传一年级")
        this.$emit("fun",this.list[0].title,false)
     }
   }
 }
}
</script>

<style lang="scss" scoped>
// 选中的样式 
.active{
  color: orangered;
}
.sel{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  z-index:999;
  background: deepskyblue;
  color: black;
}
ul{
  li{
    width: 100px;
    height: 40px;
    background: white;
    margin: 0 10px;
    margin-bottom: 10px;
  }
}
</style>

然后在其需要调用的组件中调用使用就ok了

<template>
  <div>
		<p @click="save()">↓</p>
		<Sel :list="list" @fun="fun" v-show="flag"></Sel>
  </div>
</template>

<script>
import Sel from "@/components/Sel"
import Bus from "../utils/Bus"
export default {
	components:{Sel},
	data(){
        return {
		   flag:false,// 显示隐藏
		   // 这里我是模拟的数据 可以使用axios请求数据
           list:[
			   {id:1,title:'一年级'},
			   {id:2,title:'二年级'},
			   {id:3,title:'三年级'},
			   {id:4,title:'四年级'},
			   {id:5,title:'五年级'},
			   {id:6,title:'六年级'},
			   {id:7,title:'初一'},
			   {id:8,title:'初二'},
			   {id:9,title:'初三'}
		   ]
        }
    },
	methods:{
	// 这里就是封装的组件派发的事件,在其调用的组件中去写业务逻辑
		fun(e,s)
		{
			console.log('我是调用的组件传来的'+e)
			this.flag=s;//关闭
			//在这里可以使用ajax去请求数据，并携带者我们传来的参数
			// 例如
			// this.$axios.get("https://www.****?title="+e)
		},
		// 显示隐藏
		save()
		{
			this.flag=!this.flag
		}
	}
}
</script>

大体思路就是
在组件中调用封装的组件 然后通过props传数据，
在封装的组件中呢，使用 $emit 派发事件，业务逻辑是在父组件中去写的
比如在封装的组件中选好数据，最后他是用来传递给父元素的
调用他的组件接收到传来的数据，在进行一下业务处理，比如接收到的参数 用来axios请求数据，携带这个参数，大体思路就是这些