学习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.

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

相关推荐
Luis Li 的猫猫1 小时前
深度学习中的知识蒸馏
人工智能·经验分享·深度学习·学习·算法
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
鹿鸣悠悠3 小时前
第二月:学习 NumPy、Pandas 和 Matplotlib 是数据分析和科学计算的基础
学习·numpy·pandas
Java能学吗5 小时前
2.17学习总结
数据结构·学习
靡不有初1116 小时前
CCF-CSP第31次认证第二题——坐标变换(其二)【NA!前缀和思想的细节,输出为0的常见原因】
c++·学习·ccfcsp
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript