vue学习笔记の实现select组件

通过这几天的学习，初步实现了自定义的选择下拉框组件，其中，可以把下拉选项抽离出来作为子组件，整个组件为父组件，其主要由<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><br>     <!--若想使用自定义组件，则需要下面先进行注册组件//子组件-->
   </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>