问题1：Vue3使用了setup API，无法访问到this，虽然提供了getCurrentInstance API，但访问全局变量时感觉比Vue2使用方式更繁琐了，因此想了个捷径（小菜鸟想法）
getCurrentInstance() 获取到全局对象挂载到window上，页面直接使用window.$this访问即可
// getThis.js
import { getCurrentInstance } from 'vue-demi'
const getThis = function () {
window.$this = getCurrentInstance().appContext.config.globalProperties
}
export {
getThis
}
// App.vue
import { getThis as getThisMountToWindow } from './utils/getThis.js'
onMounted(() => {
getThisMountToWindow() // getCurrentInstance必须在生命周期中调用
})
// home.vue
const _this = window.$this
_this.$router.push()
_this.$api.xxx()
// ...
问题2：Vue3中无法通过$refs获取ref，虽然提供了getCurrentInstance API，但还是比较繁琐
配合$this使用以获得Vue2写法，效果更佳
// getThis.js
import { getCurrentInstance } from 'vue-demi'
const getCtxRefs = function () {
return getCurrentInstance().ctx.$refs
}
export {
getCtxRefs
}
// main.js
import { getCtxRefs } from './utils/getThis.js'
...
app.config.globalProperties.$getRefs = getCtxRefs
// home.vue
onMounted(() => {
// 通过封装的getCtxRefs()获取到this.$refs
_refs = _this.$getRefs()
_refs.pc.style.color = 'blue'
// ...
})
未完待续
Original: https://www.cnblogs.com/zh1q1/p/16325814.html
Author: 吴知木
Title: Vue3提高效率小技巧
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/599355/
转载文章受原作者版权保护。转载请注明原作者出处！