Vue 3 全局注册属性与方法

訾博ZiBo

发布于 2025-01-06 19:22:56

4400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

Vue 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.globalProperties
  console.log(global.name) // 訾博
  global.sayHello() // Hello
}
</script>