vue3 全局组件

作者：Cold—blooded凉薄发布日期:2025-03-05 浏览:41

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

const app = createApp(App);

// 注册全局组件
app.component('my-global-component', MyGlobalComponent);

app.mount('#app');

解释说明：

导入必要的模块：
- createApp 用于创建 Vue 应用实例。
- App 是应用的根组件。
- MyGlobalComponent 是我们想要注册为全局组件的自定义组件。
创建 Vue 应用实例：
- 使用 createApp(App) 创建一个新的 Vue 应用实例，并将其赋值给变量 app。
注册全局组件：
- 使用 app.component 方法将 MyGlobalComponent 注册为全局组件。第一个参数是组件的名称（在模板中使用时的标签名），第二个参数是组件的定义。
挂载应用实例：
- 使用 app.mount('#app') 将应用实例挂载到 DOM 中具有 id="app" 的元素上。

这样，你就可以在应用中的任何地方使用 <my-global-component></my-global-component> 来引用这个全局组件了。

上一篇：怎么创建一个vue项目

下一篇：vue3引入子组件