主要的功能项：输入框及button按钮，构成初次展现的页面，通过点击输入框按钮，下拉列表选择项出现，当点击选择项中的某一项内容时，输入框中会出现相应的内容，再点击输入框，下拉选择项列表隐藏。同时，通过父组件与子组件之间的自定义属性及自定义事件的交互，实现父子组件间的数据交互。
用到的相关知识点：
1--组件
提高开发效率；可重用；简化调试步骤；便于协同开发；提升整个项目的可维护性。
2—vue中的组件
Vue中的组件是一个自定义标签，vue.js的编辑器为其添加特殊功能；vue也可以扩展原生的html元素，封装可重用的代码。
组件的基本组成：样式结构、行为逻辑、数据
3—注册组件
可以在任何模板中使用，使用前先注册。
语法：使用Vue.component（组件名，选项对象）
组件名命名规则：camelCase、kebab-case
>
}
4--组件间通信：
父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。
父组件->子组件：
父组件向子组件传递数据时，可以在组件上使用自定义属性绑定数据，在组件中需要显示的
用props声明自定义属性。
子组件->父组件：
$emit触发父组件所关心的自定义事件。父组件用v-on用来监听子组件的
事件是否触发了来作出相应的处理。
ps:父组件通过props向下传递数据给子组件，子组件通过events给父组件传递消息。父组件通过自定义属性向子组件传递时，需要显示声明props：["attrName"]。
子组件通过$emit(event,[...args])方法触发当前实例上的事件，把事件沿着作用域链向上传递，直到父组件接收到该事件作出相应反应。
5—组件中的data必须是函数
每个组件是相互独立的，如果它们共用一个对象，在更改一个组件数据的时候，会影响其他组件。如果是函数的话，每个组件都会有自己独立的数据，相互之间
不会影响。
6—受限制的元素
DOM模板解析：
某些元素中放入了自定义属性，不符合W3C标准，
会解析错误。
变通的方式：使用特殊属性is来扩展HTML标签功能。
核心代码：
<div > <!--//父组件-->
<div style="float: left">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
<!--若想使用自定义组件，则需要下面先进行注册组件//子组件-->
</div>
<div style="float: left">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
<!-- //这里可以使用驼峰命名方式也可以使用-形式-->
</div>
</div>
<script>
//注册组件
Vue.component("custom-select",{ //全局注册 //组件是独立的，不受外界影响.父组件
data:function(){
return {
selectShow:false,
val:""
};
},
props:["btnValue","list"], //props是用来绑定属性的，由父组件传过来的，这里显示声明要传入的参数,这里一定要使用驼峰命名方式
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyword" v-bind:value="val" @click="selectShow=!selectShow" />
<input type="button" class="button" v-bind:value="btnValue">
<!--//此处value值需动态绑定-->
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
></custom-list>
</div>
</section>`,
methods:{
changeValueHandle:function(value){
this.val=value;
}
}
})
Vue.component("custom-list",{ //把其放入js文件，然后通过script标签引入，别的文件即可使用到该组件
props:["list"],
template:`<ul class="list">
<li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
</ul>`,
methods:{
selectValueHandle:function(item){
//在子组件中有交互。当点击时告知父级，改变val的值，需要触发一个自定义事件
this.$emit("receive",item);
}
}
})
new Vue({
el:"#app",
data:{
list1:["上海","北京","杭州"],
list2:["17-2-21","17-3-12","17-4-16"]
}
});
</script>
结果：
licecap使用还是失败啊，继续努力。。。。。。原来是自己屏幕放大的原因啊。。。
源码地址：https://github.com/sunshineqt/vue-select