vue获取当前点击元素的父元素、子元素、上级元素等

最新推荐文章于 2025-06-05 23:46:41 发布

离山道寺biu

最新推荐文章于 2025-06-05 23:46:41 发布

阅读量3.2k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wyc_beyond/article/details/131661762

版权

这篇文章介绍了在Vue.js中如何通过方法处理点击事件，包括访问点击元素及其相邻元素、子元素和属性。同时提到了$parent和$children引用以及使用ref属性来访问组件的父级和子级实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div @click = "clickfun($event)">点击</div>

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

$parent 该组件实例的父级组件实例

$children 该组件实例的子组件实例

//通过ref属性获取
this.$refs.handle.$parent
this.$refs.handle.$children

// e 指向当前元素，可以通过 $event传递
e.target 
	是你当前点击的元素
	
e.currentTarget 
	是你绑定事件的元素

e.currentTarget.previousElementSibling.innerHTML
	获得点击元素的前一个元素

e.currentTarget.firstElementChild
	获得点击元素的第一个子元素

e.currentTarget.nextElementSibling
　　获得点击元素的下一个元素

e.currentTarget.getElementById("string")
　　获得点击元素中id为string的元素

e.currentTarget.getAttributeNode('string')
　　获得点击元素的string属性

e.currentTarget.parentElement
　　获得点击元素的父级元素

e.currentTarget.previousElementSibling.firstElementChild.innerHTML
　　 获得点击元素的前一个元素的第一个子元素的HTML值