vue3的this和实例上的方法

前言

个人认为,vue2和vue3最大的区别,还是在于语法中的this,让很多人从vue2开始写vue3的开发者一时不适应.

在vue2中,this.$emit,this.$router,this.$refs等等,都是频繁使用的,而vue3语法的改动,让vue中的this不再有原来的效果,不再绑定当前组件实例.当然了,vue3也兼容vue2原来的语法,如果使用原来的旧语法,依然是可用的.

关键在于,怎么样能在vue3中变相使用原来的this呢

获取实例

main.ts配置

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from './router'

app.use(router)
//config.globalProperties上绑定属性
app.config.globalProperties.$router = router
app.mount('#app')

在vue文件中使用

<script setup lang="ts">

const globalConfig = <ComponentInternalInstance>getCurrentInstance().appContext.config.globalProperties
console.log(globalConfig,'全局配置')
</script>

打印结果