vue中怎么实现获取当前点击对象this

应用场景

在评论列表中，有很多条评论（通过循环出来的评论列表），评论的文字有多跟少，默认展示2行超出显示点击查看更多，，要点击查看更多对当前的这条评论进行全部评论展示！

问题描述

要是在传统的点击事件中，我们可以获取当前点击事件的this来执行相应的操作，但是在vue中没有这个点击this事件！

解决问题

1、在vue中我们要通过组件的方式来实现对当前元素进去切换

父组件

<v-content :cont="item.content"></v-content>

子组件content

<template>
    <div>
    <p class="q-des-c" :class="{'text-overflow':flowshow}">{{cont}}</p>
    <p class="ckqw" @click="allText" :style="{'display':showHide}">{{kan}}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                flowshow:true,
                kan:"查看全文",
                showHide:"block"
                
            }
        },
        methods: {
            allText:function(){
                if(this.flowshow){
                    this.flowshow=false;
                    this.kan="收起"
                }else{
                    this.flowshow=true;
                    this.kan="查看全文"
                }
            },
        },
        props: {
            cont:{
                type:String,
                default:''
            },
        },
        created(){
//            console.log("字数"+this.cont.length);
            if(this.cont.length>36){
                this.showHide="block";
            }else{
                this.showHide="none";
            }
        }
    }
</script>

2、借助事件对象event来获取相关值进行操作

<button @click = “clickfun(2，$event)”>点击</button>

methods

$event 的用法--获取当前父元素，子元素，兄弟元素

methods: {
clickfun(other,e) {
// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素
    #获得点击元素的前一个元素
    e.currentTarget.previousElementSibling.innerHTML
    #获得点击元素的第一个子元素
    e.currentTarget.firstElementChild
    # 获得点击元素的下一个元素
    e.currentTarget.nextElementSibling
    # 获得点击元素中id为string的元素
    e.currentTarget.getElementById("string")
    # 获得点击元素的string属性
    e.currentTarget.getAttributeNode('string')
    # 获得点击元素的父级元素
    e.currentTarget.parentElement
    # 获得点击元素的前一个元素的第一个子元素的HTML值
    e.currentTarget.previousElementSibling.firstElementChild.innerHTML
  
    }
        }