两周掌握Vue3（三）：全局组件、局部组件、Props

代码仓库：跳转
本博客对应分支：03

一、全局组件

Vue 3 中的全局组件是在应用程序中全局注册的组件，可以在任何地方使用，而不需要在每个组件中都单独注册。

1.创建全局组件

在components目录下创建全局组件MyGlobalComponent.vue：

<!-- components/MyGlobalComponent.vue -->
<template>
    <div>This is my global component</div>
</template>
  
<script>
export default {
     
    name: 'MyGlobalComponent'
};
</script>

2.在main.js中注册全局组件

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

const app = createApp(App);

// 注册全局组件
import MyGlobalComponent from './components/MyGlobalComponent.vue';
app.component('MyGlobalComponent', MyGlobalComponent);

app.mount('#app');

3.使用全局组件

在App.vue中尝试使用我们定义和注册的全局组件：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 使用全局组件 -->
    <MyGlobalComponent ></MyGlobalComponent>
    <HelloWorld