通過這幾天的學習，初步實現了自定義的選擇下拉框組件，其中，可以把下拉選項抽離出來作為子組件，整個組件為父組件，其主要由<div>、<input>、<custom-select>、<ul>、<li>等標簽構成基本的選擇組件頁面結構。主要的功能項：輸入框及button按鈕，構成初次展現的頁面，通過點擊輸入框按鈕，下拉列表選擇項出現，當點擊選擇項中的某一項內容時，輸入框中會出現相應的內容，再點擊輸入框，下拉選擇項列表隱藏。同時，通過父組件與子組件之間的自定義屬性及自定義事件的交互，實現父子組件間的數據交互。
用到的相關知識點：
1--組件
可以理解為頁面的一部分，其具有獨立的邏輯及功能或界面，同時又能與其他部分進行相應地融合，變成完整的應用。頁面可以由這樣一個個的組件構成，如導航欄、列表項、彈窗、側邊欄、下拉框、多選框等。頁面相當於一個大的框架，將這些組件組合成一個功能更為強大的模塊，組件方便被替換或刪除，而不影響整個應用程序的運行。 前端組件化的思想： 將大的東西拆成一個個的小東西，然后完成小東西的功能，最后再將這些小東西進行組合，得到最初想要的模樣，即分而治之的思想。 使用組件的優勢： 提高開發效率；可重用；簡化調試步驟；便於協同開發；提升整個項目的可維護性。
2—vue中的組件
Vue中的組件是一個自定義標簽，vue.js的編輯器為其添加特殊功能；vue也可以擴展原生的html元素，封裝可重用的代碼。
組件的基本組成：樣式結構、行為邏輯、數據
3—注冊組件
全局注冊： 可以在任何模板中使用，使用前先注冊。
語法：使用Vue.component（組件名，選項對象）
其中，Vue是構造函數，component是其下的方法。組件名命名規則：camelCase、kebab-case
在html中使用組件：使用kebab-case命名法 eg. 注冊：Vue.component(’my-component’,{}) 使用：<my-component<</my-component>
局部注冊： 在組件實例中通過選項對象注冊，只在所注冊的作用域中使用 { components:{ 組件名：選項對象 } }
4--組件間通信：
父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。
父組件->子組件：
組件實例的作用域是孤立的，不能在子組件直接用父組件的數據。 父組件向子組件傳遞數據時，可以在組件上使用自定義屬性綁定數據，在組件中需要顯示的
用props聲明自定義屬性。
子組件->父組件：
子組件向父組件傳遞數據時，需要用到自定義事件，父組件用$on監聽自定義事件，$emit觸發父組件所關心的自定義事件。父組件用v-on用來監聽子組件的
事件是否觸發了來作出相應的處理。
ps:父組件通過props向下傳遞數據給子組件，子組件通過events給父組件傳遞消息。父組件通過自定義屬性向子組件傳遞時，需要顯示聲明props：["attrName"]。
子組件通過$emit(event,[...args])方法觸發當前實例上的事件，把事件沿着作用域鏈向上傳遞，直到父組件接收到該事件作出相應反應。
5—組件中的data必須是函數
每個組件是相互獨立的，如果它們共用一個對象，在更改一個組件數據的時候，會影響其他組件。如果是函數的話，每個組件都會有自己獨立的數據，相互之間
不會影響。
6—受限制的元素
DOM模板解析：
vue是在瀏覽器解析和標准化html后才獲取模板內容，所以有些元素限制了能被它包裹的元素。如ul里只能放li 某些元素中放入了自定義屬性，不符合W3C標准，
會解析錯誤。
變通的方式：使用特殊屬性is來擴展HTML標簽功能。
核心代碼：
<div id="app"> <!--//父組件-->
<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