Vue3注册全局方法|极客教程

Vue3注册全局方法

在Vue3中，可以通过Vue实例的config.globalProperties属性来注册全局方法。全局方法可以在项目的任何地方进行调用，非常方便实用。

步骤

1. 创建Vue实例

首先，我们需要创建一个Vue实例，可以在main.js中进行配置：

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

const app = createApp(App)

// 注册全局方法
app.config.globalProperties.$sayHello = () => {
    console.log('Hello, Vue3!')
}

app.mount('#app')

在上面的示例中，我们定义了一个全局方法$sayHello，当调用这个方法时，控制台将输出”Hello, Vue3!”。

2. 在组件中使用全局方法

通过Vue实例注册的全局方法，可以在组件中通过this关键字进行调用。例如，在一个组件中调用我们注册的全局方法$sayHello：

export default {
    mounted() {
        this.$sayHello()
    }
}

当这个组件被挂载时，控制台将输出”Hello, Vue3!”。

3. 示例代码

下面是一个完整的示例代码，演示了如何在Vue3中注册全局方法并在组件中调用：

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

const app = createApp(App)

// 注册全局方法
app.config.globalProperties.$sayHello = () => {
    console.log('Hello, Vue3!')
}

app.mount('#app')

<!-- App.vue -->
<template>
    <div>
        <h1>Vue3 Global Method Example</h1>
    </div>
</template>

<script>
export default {
    mounted() {
        this.$sayHello()
    }
}
</script>

在上面的代码中，我们在main.js中注册了全局方法$sayHello，并在App.vue组件的mounted生命周期钩子中调用了该方法。