文章标题

     通过近两天的学习，初步实现了自定义的选择下拉框组件，其主要由<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’,{})
使用：

<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是用来绑定属性的，由父组件传过来的，这里显示声明要传入的 //参数,这里一定要使用驼峰命名方式    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){                       //  alert("chufa");                 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>