学习Vue 02-25 注册全局组件

25 注册全局组件

Using the components property of Options API to register a component only enables its availability explicitly within the current component. Any of the present component's nested elements won't have access to use the registered one.

使用 Options API 的 components 属性注册组件，只能在当前组件中明确使用。当前组件的任何嵌套元素都无法使用已注册的组件。

Vue exposes the instance method Vue.component(), which receives two input parameters as arguments:

A string stands for the component's registered name (alias).
A component instance, either an SFC imported as a module or an object containing the component's configurations, following Options API.

Vue 公开了实例方法 Vue.component()，该方法接收两个输入参数作为参数：

一个字符串，代表组件的注册名称（别名）。
一个组件实例，可以是作为模块导入的 SFC，也可以是包含组件配置的对象（遵循 Options API）。

To register a component globally, we trigger component() on the created app instance.

要全局注册一个组件，我们需要在创建的应用程序实例上触发 component()。

第一步：创建components/GlobalDemo.vue作为全局组件的示例

html 复制代码

<template>
    <h1>这是一个全局组件</h1>
</template>

第二步：在main.ts中导入全局组件并注册

js 复制代码

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
// 导入全局组件
import GlobalDemo from './components/GlobalDemo.vue'
import router from './router'

const app = createApp(App)

// 注册全局组件
app.component('GlobalDemo', GlobalDemo)
app.use(createPinia())
app.use(router)

app.mount('#app')

第三步：在App.vue中使用全局组件

html 复制代码

<script>
export default {
  data() {
    return {
    }
  }
}
</script>
<template>
  <h1>使用全局组件</h1>
  <GlobalDemo />
</template>

Example 2-17. Register MyComponent as global component and use it in the App template

例 2-17. 将 MyComponent 注册为全局组件并在应用程序模板中使用它

js 复制代码

/* main.ts */
import { createApp } from 'vue'
//1. Create the app instance
const app = createApp({
	template: '<MyComponent />'
});
//2. Define the component
const MyComponent = {
	template: 'This is my global component'
}
//3. Register a component globally
app.component('MyComponent', MyComponent)
app.mount('#app')

If you have a MyComponent as an SFC file (see Chapter 3), you can rewrite Example 2-17 to the following:

如果将 MyComponent 作为 SFC 文件（参见第 3 章），则可以将例 2-17 重写如下：

js 复制代码

/* main.ts */
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

//1. Create the app instance
const app = createApp(App);

//2. Register a component globally
app.component('MyComponent', MyComponent);

And MyComponent will always be available for reuse in any component nested within the app instance.

而且 MyComponent 始终可在应用程序实例中嵌套的任何组件中重复使用。

Importing the same component again in every component file can be repetitive and inconvenient. In reality, sometimes you need to reuse a component multiple times across an application. In this scenario, registering components as global components is an excellent practice.

在每个组件文件中再次导入相同的组件既重复又不方便。实际上，有时你需要在一个应用程序中多次重复使用一个组件。在这种情况下，将组件注册为全局组件是一种很好的做法。