虽然Vue实现了MVVM模型,将数据和表现进行了分离,我们只需要更新数据就能使DOM同步更新,但是某些情况下,还是需要获取DOM元素进行操作(比如引入的某个库要求传入一个根dom元素作为根节点,或者写一些自定义指令),本文主要介绍几种在Vue中获取DOM元素的方法。
使用DOM API直接找元素
<script>
...
mounted () {
let elm = this.$el.querySelector('#id')
}
</script>
这种方法足够简单直观,Vue组件在patch阶段结束时会把this.$el
赋值为挂载的根dom元素,我们可以直接使用$el
的querySelector, querySelectorAll
等方法获取匹配的元素。
refs
<template>
<div ref="bar">{{ foo }}</div>
<MyAvatar ref="avatar" />
...
</template>
<script>
...
mounted () {
let foo = this.$refs['bar'] // 一个dom元素
let avatar = this.$refs['avatar'] // 一个组件实例对象
}
</script>
使用组件实例的$refs
即可拿到组件上ref
属性对应的元素。
如果ref属性加在一个组件上,那么拿到的是这个组件的实例,否则拿到的就是dom元素了。
值得注意的是包含v-for
循环模板指令的情况,其循环元素和子元素上ref
属性对应的都是一个数组(就算动态生成ref,也是数组):
<template>
<div v-for="item in qlist" :key="item.id" ref="qitem">
<h3>{{ item.title }}</h3>
<p ref="pinitem">{{ item.desc }}</p>
<p :ref="'contact'+item.id">{{ item.contact }}</p>
</div>
...
</template>
<script>
...
data () {
return {
qlist: [
{ id: 10032, title: 'abc', desc: 'aadfdcc', contact: 123 },
{ id: 11031, title: 'def', desc: '--*--', contact: 856 },
{ id: 20332, title: 'ghi', desc: '?/>,<{]', contact: 900 }
]
}
},
mounted () {
let foo = this.$refs['qitem'] // 一个包含dom元素的数组
let ps = this.$refs['pinitem'] // p元素是v-for的子元素,同样是一个数组
let contact1 = this.$refs['contact' + this.qlist[0].id] // 还是个数组
}
</script>
关于这个的原因,可以从Vue关于ref处理的部分代码得到:
function registerRef (vnode, isRemoval) {
var key = vnode.data.ref;
if (!isDef(key)) { return }
var vm = vnode.context;
// vnode如果有componentInstance表明是一个组件vnode,它的componentInstance属性是其真实的根元素vm
// vnode如果没有componentInstance则不是组件vnode,是实际元素vnode,直接取其根元素
var ref = vnode.componentInstance || vnode.elm;
var refs = vm.$refs;
if (isRemoval) {
...
} else {
// refInFor是模板编译阶段生成的,它是一个布尔值,为true表明此vnode在v-for中
if (vnode.data.refInFor) {
if (!Array.isArray(refs[key])) {
refs[key] = [ref]; // 就算元素唯一,也会被处理成数组
} else if (refs[key].indexOf(ref) < 0) {
// $flow-disable-line
refs[key].push(ref);
}
} else {
refs[key] = ref;
}
}
}
使用自定义指令
Vue提供了自定义指令,官方文档给出了如下的使用方法,其中el
就是dom元素的引用
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 在模板中
<template>
<input v-model="name" v-focus />
</template>
关于自定义指令,在一些组件库和事件上报等场景下非常有用,以后再专门写一篇文章讨论一下吧。