> 文章列表 > Vue 3 全局注册属性与方法

Vue 3 全局注册属性与方法

Vue 3 全局注册属性与方法

Vue 3 全局注册属性方法

文章目录

  • Vue 3 全局注册属性与方法
    • 1、在 main.ts 文件中全局注册
    • 2、在组件中调用
    • 3、运行结果

1、在 main.ts 文件中全局注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'const app = createApp(App);// 全局注册属性
app.config.globalProperties.name = '訾博';// 全局注册方法
app.config.globalProperties.sayHello = function () {console.log('Hello');
}app.mount('#app')

2、在组件中调用

<template></template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
if (instance) {const global = instance.appContext.config.globalPropertiesconsole.log(global.name) // 訾博global.sayHello() // Hello
}
</script>

3、运行结果

訾博
Hello