vue2的$el.querySelector在vue3中怎么写

devtools/2025/1/22 20:24:14/

这个也属于直接操作 dom 了，不建议在项目中这样操作，不过我是在vue2升级vue3的时候遇到的，是以前同事写的代码，也没办法

先来看一下对比

在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 ref=xxx 的实例，并且实例上面的$el存在 querySelector 方法，看一下 vue2 的组件代码：

<template><div><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogref="dialogInstance"title="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"@opened="handlerOpen"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>
<script>
export default {data() {return {dialogVisible: false,}},methods: {handlerOpen() {console.log(this.$refs.dialogInstance.$el.querySelector, 'lll')},handleClose(done) {this.$confirm('确认关闭？').then((_) => {done()}).catch((_) => {})},},
}
</script>

此时当弹出那个出现时，是能看到这个方法的

在vue3中我们获取实例是通过 const xxxInstance = ref(xxx) 获取绑定属性 ref=xxx 的实例，但是在 xxxInstance.value.$el 上面却找不到 querySelector 方法，来看一下代码：

<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"class="sdf"@opened="handleOpen"ref="dialogInstance"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogInstance: any = ref(null)
const dialogVisible = ref(false)const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.querySelector, 'qqqq')
}const handleClose = (done: () => void) => {done()
}
</script>

输出

具体原因我也不知道，不过我在 $el 的 nextElementSibling 属性中找到了 querySelector 方法，并且可以使用

const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.nextElementSibling.querySelector,'ertert')
}