vue2使用querySelector
时间: 2023-07-22 17:41:23 浏览: 46
在Vue2中使用`querySelector`函数获取DOM元素会有一些限制,因为Vue2使用的是运行时编译模式,模板中的标签可能还没有被渲染成真实的DOM元素。如果在模板中使用了`v-if`或者`v-for`等指令,`querySelector`函数可能会返回`null`。
解决这个问题的方法是使用Vue提供的`ref`和`$refs`属性。`ref`可以为组件或者DOM元素赋予一个唯一的标识符,然后可以通过组件的`$refs`属性获取对应的组件或者DOM元素。
以下是一个使用`ref`和`$refs`属性获取DOM元素的示例:
```vue
<template>
<div ref="myDiv">
Hello World
</div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$refs.myDiv
// 此时myDiv已经是DOM元素了,可以使用querySelector等方法获取其子元素
const child = myDiv.querySelector('.child')
console.log(child.textContent) // 输出:Child Element
}
}
</script>
```
在上述示例中,我们为`div`元素添加了一个`ref="myDiv"`属性,然后在组件的`mounted`生命周期函数中通过`this.$refs.myDiv`获取到这个DOM元素。此时,`myDiv`已经是一个真实的DOM元素,我们可以使用`querySelector`等方法获取其子元素。
需要注意的是,`$refs`属性是在组件渲染完成后才能获取到的,所以要在`mounted`生命周期函数中使用它。另外,如果组件中存在多个相同的`ref`,`$refs`属性会返回一个对象,其中包含所有拥有相同`ref`的组件或者DOM元素。