【IMWeb训练营作业】第二次Vue作业-select component

	<div id="app">
		<div style="float:left">
			<h2>自定义的下拉框1</h2>
			<custom-select btn="搜索" :list="list1"></custom-select>
		</div>
		<div style="float:left">
			<h2>自定义的下拉框2</h2>
			<custom-select btn="查询" :list="list2"></custom-select>
		</div>
	</div>

		//注册组件
		Vue.component('custom-select', {
			data: function(){
				return {
					selectShow: false,
					val: ''
				}
			},
			props: ['btn', '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="btn">
						<span></span>
					</div>
					<custom-list v-show="selectShow" :list="list" @receive="changeValueHandle"></custom-list>
				</div>
			</section>`,
			methods: {
				changeValueHandle: function(value){
					//alert('我被点击了,值为：' + value);
					this.val = value;
				}
			}
		});

		Vue.component('custom-list', {
			props: ['list'],
			template: `<ul class="list">
						<li v-for="item in list" @click="selectValueHandle(item)">{{ item }}</li>
					</ul>`,
			methods: {
				selectValueHandle: function(value){
					//子组件中交互数据
					this.$emit('receive', value)
				}
			}
		});

		new Vue({
			el: '#app',
			data: {
				list1: ['降龙十八掌', '打狗棍法', '蛤蟆神功'],
				list2: ['北京', '上海', '广州', '深圳']
			}
		});