获取组件对象
在Vue项目中经常需要对组件对象进行操作,或者获取组件内的数据或方法,常规做法是通过css类选择器来获取,但是有时候会因为同名的原因造成获取的不是我们想要的对象。 Vue中为我们提供了一个很多获取组件对象的属性——“ref”
//直接在标签中使用ref属性
<van-nav-bar ref="nav"></van-nav-bar>
//就可以直接获取该组件对象
cont navbar = this.$refs.nav
获取组件的元素(或DOM)
在项目中我们仅仅获取组件对象是不够的,有时需要获取到组件的DOM节点,例如获取节点的offsetTop等定位数据。 这里就需要在获取组件对象的基础上使用$el获取对应的DOM节点
//首先在标签中使用ref属性
<van-nav-bar ref="nav"></van-nav-bar>
//在组件对象中使用$el获取DOM节点
cont navbar = this.$refs.nav.$el.offsetTop