【IMWeb训练营作业】组件间通讯

1.目录结构

2. HTML 基础骨架以及自定义标签的使用

	<div id="app">
		<div style="float: left;">
			<h2>自定义下拉框</h2>
			<!-- 自定义标签 （使用组件）-->
			<custom-select but-value="查询" :lists="list1"></custom-select>
		</div>
		<div style="float: left;">
			<h2>自定义下拉框2</h2>
			<!-- 使用  v-bind：来动态的绑定数据并通过自定义属性向子组件传递数据 -->
			<custom-select but-value="搜索" :lists="list2"></custom-select>
		</div>		
	</div>

3.Vue 全局组件注册（封装在 main.js 中）

Vue.component("custom-select", {	//全局注册一个组件
		data:function(){
			//返回各自的数据对象
			return {
				selectShow:false,
				val:"",
			};
		},
		props:["butValue", "lists"],
		template:`<section class="warp">
						<div class="searchIpt clearFix">
							<div class="clearFix">
								<input type="text" class="keyWord" @click="selectShow = !selectShow" :value="val" />
								<input type="button" :value="butValue">
								<span></span>
							</div>
							<custom-list v-show="selectShow" :lists="lists" v-on:receive="changeValue" >
							</custom-list>
						</div>
					</section>`,
		methods:{
			changeValue(value){
				this.val = value;
				this.selectShow = false;
			}
		}
	});
	
	//将 ul 标签单独分离出来，降低其父组件的耦合性
	Vue.component("custom-list", {
		props:["lists"],
		template:`	<ul class="list">
						<li v-for="item of lists" @click="selectValueHandle(item)">{{item}}</li>
					</ul>
				`,
		methods:{
			//通过子组件的点击事件向父组件传递数据，子组件 ---> 父组件
			//告诉父组件需要改变val的值需要触发一个自定义事件
			selectValueHandle:function(item){
				this.$emit("receive", item);
			}
		}
	});

4. 效果图