vue3 setup 使用 getCurrentInstance

vue3 setup 使用 getCurrentInstance

为什么要使用getCurrentInstance？
使用过vue2的肯定记得这个语法：

// main.js

......
Vue.prototype.$xxx = 'xxx'


// App.vue   (使用)

export default {
	...
	mounted(){
		console.log(`this.$xxx:`,this.$xxx)
	}
}

Vue3中，没有提供实例对象，（没有new）所提供getCurrentInstance，帮助我们自定义放置内容。

概念： 一个非常重要的知识点，获取当前组件的实例、上下文来操作router、vuex和自定义属性/方法等
定义：

// main.ts


import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');

// 自定义属性   类似于 vue.prototype.xxx = xxx
app.config.globalProperties.message = '123'

使用：

<template>
  <h1>vue3 中 优雅的使用getCurrentInstance</h1>
  <h2>{{ msg }}</h2>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";// 获取当前实例，在当前实例充当vue2 中的this
const { proxy } = getCurrentInstance();// ctx中有问题，建议使用proxy中获取 
const msg = ref(proxy.$message);
</script>

<style>
</style>

每天学习一丢丢
你会发现你的知识加上尤雨溪的知识堪比尤雨溪，加油哈哈哈哈