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

最新推荐文章于 2024-05-13 13:46:43 发布

WorkAndDebugger

最新推荐文章于 2024-05-13 13:46:43 发布

阅读量736

点赞数 7

分类专栏： vue2 文章标签： javascript vue.js ecmascript

本文链接：https://blog.csdn.net/xiang_gong_ya_/article/details/135825143

版权

vue2 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中，通过mouseover和click事件在父组件和子组件间传递信息，特别关注了如何通过子组件的标题内容确定触发的组件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

不管是移入，或者是点击事件
都要知道是触发的哪个组件
这里子组件是个通用小标题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>