【IMWeb训练营作业】select

时间飞逝，在10天训练营的日子快要结束了。这次带来第二次作业，一个简单的select组件，先来看看效果图：

效果图

功能简析

Vue其中一个核心概念就是组合的组件化，根据效果图，我们可以知道下拉框和弹出的内容统称为一个select组件，其中还可以根据弹出的内容再分为一个组件。首先要注册一个组件，这里可以用局部组件，也可以用全局组件。我注册了一个custom-select组件，在模板中使用<custom-select></custom-select>的形式，相当于扩展了HTML标签。然后这个组件里面还有一个子组件custom-list,用来控制弹出内容。

1.事件监控器v-on用来监控input框的鼠标点击事件，使得下面的弹出内容div显示或者隐藏

2.我们还注意到两个搜索框的按钮不一样，一个叫做“搜索”，一个叫做“查询”，这里涉及到父组件到子组件通信的技术。不难想到，我们只需要改变input框的value值就可以实现，那么这个值怎么传入到那里呢？在父组件自定义一个属性btn-value，并在子组件的选项对象里通过props告知子组件有这么一个值，并且绑定input的value值来接收这个值，这样就实现了两个按钮的不同。可以看到，组件化使得代码的复用性高。

<custom-select btn-value="搜索"  ></custom-select><custom-select btn-value="查询"  ></custom-select><input type="button" :value="btnValue">

props:["btnValue"]

3.下面来一个更加深入的父到子的通信。大家注意到子组件的弹出内容不同，假设有这么两个数据list1和list2它们存储在根实例的data选项里，它先要通过custom-select，再到custom-list，

new Vue({el:"#app",data:{list1:["beijing","shanghai","hanzhou"],list2:["17-2-17","17-2-18","17-2-19"]}});

我们通过绑定自定义属性list，分别赋值list1,list2来传递，当然在custom-select组件里的props选项定义了list

<custom-select btn-value="搜索" v-bind:list="list1" ></custom-select><custom-select btn-value="查询" v-bind:list="list2" ></custom-select>

接着在custom-list里面也自定义了一个属性list来接收父组件传过来的list，同样在custom-list里面的props也定义了list

<custom-list v-show="selectShow" :list="list" >

从上面的例子可以看出，父到子的通信通过自定义属性来传递。

4.接下来实现选中弹出内容的一条，就把这个内容显示在input框上。这里涉及了子到父的通信。

在子组件上的li上定义一个点击事件，并使它发射一个事件receive，实际上是告知父组件，有这么一个事件。

<li v-for="item of list" @click="selectValue(item)">{{item}}</li>

methods:{selectValue:function(item){//点击了一下 在子组件中有交互 告知父级改变val的值this.$emit("receive",item)}}

告知了父组件，父组件需要监听它,并且改变相应的value值

<custom-list v-show="selectShow" :list="list" @receive="changeValue"></custom-list>

methods:{changeValue(value){this.val= value;}

           

显然我们可以知道 ：子到父的通信需要自定义事件

到此，我们就完成了一个简单的select组件功能

核心代码：

Vue.component("custom-list",{props:["list"],template:`<ul class="list" ><li v-for="item of list" @click="selectValue(item)">{{item}}</li></ul>`,methods:{selectValue:function(item){//点击了一下 在子组件中有交互 告知父级改变val的值this.$emit("receive",item)}}})Vue.component("custom-select",{data(){return {selectShow:false,val:''};},props:["btnValue","list"],template: `<section class="warp"><div class="searchIpt clearfix"><div class="clearfix"><input type="text" class="keyWord" :value="val"@click="selectShow=!selectShow"><input type="button" :value="btnValue"><span></span></div><custom-list v-show="selectShow" :list="list" @receive="changeValue"></custom-list></div></section>`,methods:{changeValue(value){this.val= value;}}});new Vue({el:"#app",data:{list1:["beijing","shanghai","hanzhou"],list2:["17-2-17","17-2-18","17-2-19"]}});