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
-
假设在
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'
-
根目录下新建
hooks/globalVar.ts
import {getCurrentInstance} from 'vue' export default function useGlobalProperties() { const {emit, appContext:{app:{config: {globalProperties}}}}= getCurrentInstance() return {...globalProperties} }
-
在某个组件使用
<script setup> import useGlobalProperties from '@/hooks/globalVar' const globalProperties = useGlobalProperties() console.log(globalProperties) console.log(globalProperties.$a) </script>
-
利用这个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} }
-
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向外暴露你想获取的值才行。