Vue3挂载全局变量和$refs

1 挂载全局变量

main.ts 配置：

import { createApp } from 'vue'
import App from './App'

const app = createApp(App)
app.config.globalProperties.$basePath = 'https://www.baidu.com'
app.mount('#app')

2 组件中访问全局变量

<script setup lang='ts'>
import {getCurrentInstance, onMounted } from "vue"
onMounted(() => {
      const { appContext : { config: { globalProperties } } } = getCurrentInstance()
      console.log(globalProperties.$basePath)
    })

</script>

getCurrentInstance() 只能在 setup() 或其他生命周期对应组合API中使用

3 优化访问全局变量方法

在项目中全局变量用的多了这样写就会很麻烦，因为每次都需要解构出来而每次代码都是一样的，这时候我们可以把它封装成一个hooks

1. 假设在main.ts中有这4个全局变量

   const app = createApp(App)
   app.config.globalProperties.$a = 'a'
   app.config.globalProperties.$b = 'b'
   app.config.globalProperties.$c = 'c'
   app.config.globalProperties.$d = 'd'
   

2. 根目录下新建hooks/globalVar.ts

   import {getCurrentInstance} from 'vue'
   
   export default function useGlobalProperties() {
   	const {emit, appContext:{app:{config: {globalProperties}}}}= getCurrentInstance()
   	return {...globalProperties}
   }
   
   

3. 在某个组件使用

   <script setup>
   import useGlobalProperties from '@/hooks/globalVar'
   const globalProperties = useGlobalProperties()
   console.log(globalProperties)
   console.log(globalProperties.$a)
   </script>
   
   

4. 利用这个hooks我们还能扩展一下，比如在里面加入一个Vuex中的数据：获取当前系统主题色

   import {computed, getCurrentInstance} from 'vue'
   import {useStore} from 'vuex'
   
   export default function useGlobalProperties() {
   	const {emit, appContext:{app:{config: {globalProperties}}}}= getCurrentInstance()
   	const store = useStore()
   	const curThemeColor = computed(() => store.getters.themeColor)
   	return {...globalProperties, curThemeColor}
   }
   
   

5. setup中访问$refs

    <!-- 父组件 -->
   <template>
    <div>
        <Child ref="child"></Child>
        <button @click="show">Show Child Message</button>
    </div>
   </template>
   
   
   <script setup>
   
   import { getCurrentInstance } from '@vue/runtime-core';
   import Child from './Child.vue';
   
   const currentInstance = getCurrentInstance()
   
   function show() {
     currentInstance.ctx.$refs.child.alertMessage()
   } 
   
   </script>
   
   <!-- 子组件 -->
   <template>
      <div>
        <h1>{{ message }}</h1>
     </div>
   </template>
   
   <script setup>
   import { ref } from '@vue/reactivity';
   
   let message = ref('我是子元素').value
   
   const alertMessage = function () {
     alert(message)
   }
   
   defineExpose({
     message,
     alertMessage
   })
   </script>
   
   

   注意⚠️，通过<script setup>语法糖的写法，其组件是默认关闭的，也就是说如果是通过$refs或者$parents来访问子组件中定义的值是拿不到的，必须通过defineExpose向外暴露你想获取的值才行。