网站404是什么意思,在局域网建设网站,wordpress 改地址,各种大型网站这个也属于直接操作 dom 了#xff0c;不建议在项目中这样操作#xff0c;不过我是在vue2升级vue3的时候遇到的#xff0c;是以前同事写的代码#xff0c;也没办法
先来看一下对比
在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例#xff0c;并且…这个也属于直接操作 dom 了不建议在项目中这样操作不过我是在vue2升级vue3的时候遇到的是以前同事写的代码也没办法
先来看一下对比
在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例并且实例上面的$el存在 querySelector 方法看一下 vue2 的组件代码
templatedivel-button typetext clickdialogVisible true点击打开 Dialog/el-buttonel-dialogrefdialogInstancetitle提示:visible.syncdialogVisiblewidth30%:before-closehandleCloseopenedhandlerOpenspan这是一段信息/spanspan slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible 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) 获取绑定属性 refxxx 的实例但是在 xxxInstance.value.$el 上面却找不到 querySelector 方法来看一下代码
templateel-button plain clickdialogVisible trueClick to open the Dialog/el-buttonel-dialogv-modeldialogVisibletitleTipswidth500:before-closehandleCloseclasssdfopenedhandleOpenrefdialogInstancespanThis is a message/spantemplate #footerdiv classdialog-footerel-button clickdialogVisible falseCancel/el-buttonel-button typeprimary clickdialogVisible falseConfirm/el-button/div/template/el-dialog
/templatescript langts setup
import { ref } from vueconst 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)
}
总结
在 vue3 中如果要像 vue2 一样使用 $el.querySelector 的时候使用 $el.nextElementSibling 的 querySelector
