当前位置：首页 > article >正文

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

article 2025/1/25 0:20:24

这个也属于直接操作 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-dialog
      ref="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-dialog
    v-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'
  )
}