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>