vue.获得同胞元素，子元素，父元素

最新推荐文章于 2024-10-10 17:12:17 发布

萝卜砸大坑

最新推荐文章于 2024-10-10 17:12:17 发布

阅读量10w+

点赞数

分类专栏： web 前端文章标签： vue 同胞元素

本文链接：https://blog.youkuaiyun.com/weixin_45266125/article/details/103197057

版权

web 前端专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了Vue.js中组件实例的父子关系访问方法，如何通过ref属性获取组件实例，以及利用原生JS进行DOM操作的技巧，包括添加、删除类名等。

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

博客地址：http://www.globm.top/blog/1/detail/37

$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值

原生JS添加类名删除类名

为 div>元素添加 class:

document.getElementById("myDIV").classList.add("mystyle");

为 div 元素添加多个类:


document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

为 div元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

为 div 元素移除多个类:


document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

检查是否含有某个CSS类


myDiv.classList.contains('myCssClass'); //return true or false