IMWeb训练营——select组件

说到组件，首先要明确的一点就是组件是web页面中的一部分，今天的一个主题就是进行组件化开发。整个是以selec为例的。做出来的效果图如下：

1.打开页面，最开始出现的是这样一个简单的查询框

2.把鼠标放在输入框上会有下拉选项出现：

3.点击下面列表中的内容，输入框也会相应的出现相同的内容：

其中主要的代码如下：

		<div id="app">
			
				<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
					
		</div>
		
		<script>
			
			//注册组建
			Vue.component("custom-select",{
				data:function(){
					return {
						selectShow:false,
						val:"",
					};
				},
				props:["btnValue","list"],
				template:`<section  class ="warp">
						<div class="searchIpt">
							<div class="clearFix">
								<input type="text" class="keyWord" :value="val" @click="selectShow=!selectShow" />
								<input type="button" class="go" v-bind:value="btnValue"/>
								<span></span>
							</div>
							<custom-list 
								v-show="selectShow" 
								:list="list"
								v-on:receive="changeValueHandle"
							></custom-list>
						</div>
					</section>`,
					methods:{
						changeValueHandle(value){
							this.val=value;
						}
					}
			})
			
			Vue.component("custom-list",{
				props:["list"],
				template:`<ul class="list">
								<li v-for="item of list" @click="selectValueHandler(item)">{{item}}</li>
							</ul>`,
				methods:{
					selectValueHandler:function(item){
						//在子组件中有交互
						//告知父级，val改变的值，需要触发一个自定义事件
						
						this.$emit("receive",item);
					}
				}
			})
			
			var data = {
				list1:["四川","重庆","湖南"]
			}
			new Vue({
				el:"#app",
				data:data,
				
			});
		</script>