父元素添加点击事件找到子元素

源码Demo:

<template>
    <div class="container">
        <div class="title">{{getData.title}}</div>
        <div class="text" @click="imgs"></div>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>
<script>
import $ from 'jquery'
import BigImg from '../components/BigImg.vue';
export default {
    name:'Information_Details',
    components: {
        'big-img':BigImg
    },
    data(){
        return{
            showImg:false,
            imgSrc: '',
            getData:{}
        }
    },
    mounted() { 
        this.get_datas()
    },
    updated() {
        $('img').css({
			'display':'inline-block',
			'width':'100%',
			'float':'left',
			'padding':'0 10px 0 0',
			'box-sizing':'border-box'
        })
    },
    methods: {
        imgs(e){
            if(e.target.src!=undefined){
                this.showImg = true;
                // 获取当前图片地址
                this.imgSrc = e.target.src;
            }
        },
        viewImg(){
            this.showImg = false;
        },
        get_datas(){
            var reg = new RegExp('(^|&)' + 'id' + '=([^&]*)(&|$)')
            let url = window.location.href;
            let search = url.split('?')[1]
            if (search){
                var r = search.substr(0).match(reg)
                if (r !== null){
                    this.ids=unescape(r[2])
                }
            }
            let that=this
            this.$axios({
                url:'https://shzs.songhuirongchuang.com/api/app/noauth/rest/query/activityDetail?id='+that.ids,
                //url:this.Get_data_Host,
                method: 'get',
            })
            .then(res=>{
                this.getData=res.data.result
                $('.text').html(res.data.result.content)
            })
            .catch(error=>{
                alert('服务器出错！')
            })
        }
    }
}
</script>

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

<style scoped lang="less">
.container{
    width: 100%;
    .title{
        width: 100%;
        margin-top: 10px;
        font-size: 30px;
        color:#384357;
        font-family: PingFangSC-Medium;
        line-height: 42px;
        font-weight: 600;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .text{
        width: 100%;
        padding-left: 20px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}  
</style>

BigImg.vue组件

<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
            <div class="img-layer">
                <div class="img">
                    <img :src="imgSrc">
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    props: ['imgSrc'],
    methods: {
        bigImg() {
            // 发送事件
            this.$emit('clickit')
        }
    }
}
</script>
<style scoped>
/*动画*/
.fade-enter-active,
.fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
}

.fade-enter,
.fade-leave-active {
    transform: translate3D(100%, 0, 0);
}


/* bigimg */

.img-view {
    position: relative;
    width: 100%;
    height: 100%;
}

/*遮罩层样式*/
.img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/*不限制图片大小，实现居中*/
.img-view .img img {
    max-width: 100%;
    display: block;
    position: absolute;
    left: 0 ;
    right: 0;
    top: 0;
    bottom:0;
    margin: auto;
    z-index: 1000;
}
</style>