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>