Vue自定义组件的点击事件（封装组件）

╰+攻爆jí腚メ 2021-07-24 23:46 1030阅读 0赞

### 大纲 ###

*   *   *  问题：
         *  解决：
         *   *   *   *  子组件写的
                     *  父组件写的
         *  图片标记
         *   *   *   *  父组件
                     *  子组件
         *  全部代码：
         *   *   *   *  子组件页面
                     *  父组件页面
         *  成功演示

### 问题： ###

想封装一个自定义组件，父组件能控制子组件写的点击事件

### 解决： ###

###### 子组件写的 ######

在点击的move事件内写

that.$emit('leftClick',that.Slider_text)

或者可以写成这样

###### 父组件写的 ######

### 图片标记 ###

###### 父组件 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]

###### 子组件 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]

### 全部代码： ###

###### 子组件页面 ######

<template>
    	<div class="y-content">
    		
    		<div class="YSwitch bg-Gainsboro"  @click="onmove" >
    			<div class="YSwitch-item">
    				<div class="YSwitch-Slider" :style="{left:left}" ref='Slider'>{ { Slider_text}}</div>
    			</div>
    			
    		</div>
    		
    		
    	</div>
    </template>
    
    <script>
    export default { 
    	name: 'YSwitch',
    	data(){ 
    		return{ 
    			Slider_text:"国内播报",
    			left:"2px"
    		}
    	},
    	methods:{ 
    		async onmove(){ 
    			let e_width;
    			let e_left = this.left.slice(0,-2)
    			let that = this
    			const query = wx.createSelectorQuery().in(this)
    			await query.select('.YSwitch-Slider').boundingClientRect()
    			await query.exec(function (res) { 
    				e_width = res[0].width
    				console.log(5)
    				if(e_left == e_width-2){ 
    					that.left = '2px'
    					that.Slider_text='国内播报'
    					that.$emit('leftClick',that.Slider_text)
    					return
    				}
    				that.left = e_width-2 + 'px'
    				that.Slider_text='国外播报'
    				that.$emit('leftClick',that.Slider_text)
    			})
    			
    		}
    	}
    };
    </script>
    
    <style lang="less" scoped>
    @beforeText:'国内播报';
    @afterText:'国外播报';
    .y-content { 
    	.YSwitch{ 
    		width: 90%;
    		position: relative;
    		margin: 0 auto;
    		padding: 2px;
    		border-radius: 10px;
    		
    		.YSwitch-item::before{ 
    			content: @beforeText;
    			text-align: center;
    			display: inline-block;
    			width: 50%;
    			height: 28px;
    			line-height: 28px;
    			border-radius: 10px;
    		}
    		.YSwitch-item::after{ 
    			content:@afterText;
    			text-align: center;
    			display: inline-block;
    			width: 50%;
    			height: 28px;
    			line-height: 28px;
    			border-radius: 10px;
    		}
    		.YSwitch-Slider{ 
    			position: absolute;
    			display: inline-block;
    			background-color: #FFFFFF;
    			width: 50%;
    			height: 28px;
    			line-height: 28px;
    			text-align: center;
    			border-radius: 10px;
    			transition: 0.5s;
    		}
    	}
    }
    .bg-Gainsboro{ 
    	background-color:#DCDCDC;
    }
    </style>

###### 父组件页面 ######

<template>
    	<view class="content">
    		<view class="Htitle">实时播报</view>
    		<YSwitch @leftClick="fn"></YSwitch>
    		<real-time :list="RealTimelist"></real-time>
    	</view>
    </template>
    
    <script>
    	import {  getRealTimeData } from '../../api/index.js'
    	import RealTime from './RealTime.vue'
    	import YSwitch from './YSwitch.vue'
    	export default { 
    		components:{ RealTime,YSwitch},
    		data() { 
    			return { 
    				Inland_arr:[],
    				foreigh_arr:[],
    				RealTimelist:[{ 
    					date:'2020-03-16',childlist:[{ 
    						time:"11:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					},{ 
    						time:"12:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					},{ 
    						time:"15:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					}]
    				},{ 
    					date:'2020-03-17',childlist:[{ 
    						time:"00:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					},{ 
    						time:"05:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					},{ 
    						time:"21:01",
    						title:"拐点？海外新冠累计确诊病例超过中国，中国以外成抗疫主战场",
    						content:"呢偶然安分守己奥克兰就反过来思考的结果绿色开放的阿斯顿JFK了；阿里是否健康奥拉夫开发了拉开分类卡洛夫阿喀琉斯开发卡斯拉夫卡"
    					}]
    				}]
    			}
    		},
    		mounted() { 
    			this.GetRealTimeData(this)
    		},
    		methods: { 
    			async GetRealTimeData(that){ 
    				getRealTimeData({ 
    					callback:(result)=>{ 
    						let [ err,res] = result
    						if(err){ 
    							return console.log('请求失败！')
    						}
    						that.dataFilter(res.data)
    					}
    				})
    			},
    			// 数据处理
    			dataFilter(data){ 
    				let inland_linshi = [...data.filter(i=>i.type=='inland')]
    				let foreigh_linshi = [...data.filter(i=>i.type=='foreigh')]
    				
    				
    				let Inland_arr = []
    				let foreigh_arr = []
    				let str = "" // 判断标记
    				
    				// 以国内日期分类创建对象
    				inland_linshi.forEach(i=>{ 
    					if(str==i.time.split('日')[0]){  return }
    					Inland_arr.push({ 
    						date:i.time.split('日')[0] + '日',
    						childlist:[]
    					})
    					str = i.time.split('日')[0]
    				})
    				
    				// 以国外日期分类创建对象
    				str=''
    				foreigh_linshi.forEach(i=>{ 
    					if(str==i.time.split('日')[0]){  return } 
    					foreigh_arr.push({ 
    						date:i.time.split('日')[0] + '日',
    						childlist:[]
    					})
    					str = i.time.split('日')[0]
    				})
    				
    				
    				// 将国内时间按日期分类组合
    				str=''
    				inland_linshi.forEach(i=>{ 
    					
    					Inland_arr.forEach(item =>{ 
    						if(item.date == i.time.split('日')[0] + '日'){ 
    							item.childlist.push({ 
    								time:i.time.split('日')[1].trim(),
    								title:i.title,
    								url:i.url
    							})
    						}
    					})
    					str = i.time.split('日')[0]
    				})
    				
    				// 将国外时间按日期分类组合
    				str=''
    				foreigh_linshi.forEach(i=>{ 
    					
    					foreigh_arr.forEach(item =>{ 
    						if(item.date == i.time.split('日')[0] + '日'){ 
    							item.childlist.push({ 
    								time:i.time.split('日')[1].trim(),
    								title:i.title,
    								url:i.url
    							})
    						}
    					})
    					str = i.time.split('日')[0]
    				})
    				this.Inland_arr = Inland_arr
    				this.foreigh_arr = foreigh_arr
    				this.RealTimelist = Inland_arr  // 初始化默认选择Inland_arr国内模式
    			},
    			fn(txt){ 
    				if(txt=='国内播报'){ 
    					this.RealTimelist = this.Inland_arr 
    					return
    				}
    				this.RealTimelist = this.foreigh_arr
    			}
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    	.content{ 
    		background-color: #FFFFFF;
    		.Htitle{ 
    			padding: 20px 10px 10px 10px;
    			color: #000000;
    			font-weight: 600;
    			font-size: 16px;
    		}
    	}
    	
    </style>

### 成功演示 ###

![在这里插入图片描述][2020040820325814.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200408202649134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 1]: /images/20210724/927161a8ba004f62bc7b3d9b5fdf652e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 2]: /images/20210724/dfc13f9388b84e73ad4af08b6c585c48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70 3]: /images/20210724/a0a956ef950849eca10294ad0b019b8a.png
[2020040820325814.gif]: /images/20210724/6917ba7bc06747479939741aba6d1bfa.png