鼠标移入/点击子组件，获取选中子组件事件

本文主要是介绍鼠标移入/点击子组件，获取选中子组件事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

不管是移入，或者是点击事件
都要知道是触发的哪个组件
这里子组件是个通用小标题title
所以，通过标题内容，获取触发的哪个子组件

子组件

<template><div @mouseover="tMouseover" @mouseleave="tMouseLeave" class="title-wrap" @click="changeImg":style="title === '铁路' || title === '公路' || title === '水路' || title === '综合交通枢纽' || title === '公共交通发展' || title === '道路运输' ? 'cursor: pointer;' : ''"><span class="text">{{ title }}</span><div class="title-right"><div v-if="!selectShow"><!-- <span class="num">129</span><span class="unit">件</span> --></div><div v-else><el-select v-model="sValue" placeholder="请选择" size="mini" @change="change"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></div></div></div>
</template><script>
export default {props: {options: {type: Array,default: () => []},title: {type: String,default: ''},selectShow: {type: Boolean,default: false}},data() {return {sValue: '',a: true}},mounted() {this.sValue = this.options[0] ? this.options[0].label : null},methods: {tMouseover() {console.log(this.title);// 通过title可以知道触发某个子组件标题this.$emit("overtitle", this.title)},tMouseLeave() {this.$emit("overtitle", false)},changeImg() {this.$emit("sImg", this.title)},change(e) {console.log(e, 'e');this.$emit("sValue", this.sValue, this.options[0].label)}}
}
</script><style lang="scss" scoped>
.title-wrap {// width: 25.625rem;padding: 8px 0;background: url('@/assets/images/组 8461@2x.png') no-repeat;background-size: 100% 100%;display: flex;align-items: center;justify-content: space-between;// cursor: pointer;.text {margin-left: 1.5rem;font-size: 20px;font-weight: bold;}.title-right {margin-right: 1rem;.num {font-size: 14px;font-family: MiSans, MiSans;font-weight: 500;color: #F3AE30;}.unit {font-size: 12px;font-family: MiSans, MiSans;font-weight: 500;color: #fff;margin-left: .3125rem;}.el-select {width: 9.375rem;}::v-deep .el-input--mini .el-input__inner {background: transparent;color: #fff;border: 1px solid #093B9E;}}
}
</style>

父组件

<Box :widht="clientWidth === 3840 ? '40rem' : ''" @sImg="sImg" @overtitle='overtitle' :selectShow="false":title="'铁路'" style="left: 1.25rem;transition: left 1s ease-in-out;":style="leftShowLength ? 'left:-25.625rem' : ''"></Box>