[IMWeb训练营作业]基于vue实现的select组件

整体描述:

该demo是基于vue封装的select组件。父组件向子组件传递数据使用props；子组件向父组件传递信息通过$emit触发自定义事件。

效果预览:

可运行demo

github上完整代码--传送门

核心代码:

<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			list:["html5+css3","html+css","Vue","jq","js"],
			list2:["睡觉",'吃饭','上课']
		},
		components:{
			'select-part': {//select-part组件
				props:['use','list'],
				data:function() {
					return {showOption:false,
							val:""							
					}
				},
				template:`<div class="wrap">
								<div class="select">
									<div class="select-input">
										<input type="text" v-model="val"/>
										<label @click="showOption=!showOption">{{use}}</label>
									</div>
									<options v-show="showOption" :list="list" @changeVal="getVal"></options>
								</div>
						</div>`,
				methods:{
					getVal(item) {
						console.log("111");
						this.val = item;
					}
				},
				components:{
					'options':{//options组件
						props:["list"],
						template:`<ul class="options">
									<li v-for="item in list" @click="changeVal(item)">{{item}}</li>
								 </ul>`,
						methods:{
							changeVal(item) {
								this.$emit("changeVal",item)
							}
						}
					}
				}
			}
		}
	});
</script>