04_Vue3.0+TS之全局组件

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

Vue 全局组件

正文：

Vue的组件开发，为我们提供了代码重用提供了便捷。在开发中，很多页面会共用一部分或者全部代码，重复使用已写的代码将会大大的提高开发效率。比如：一个项目中很多页面都有页头和页脚。那么这些代码，我们就可以分别封装到组件中，在使用的时候我们可以减少很多代码量。

第一步：封装组件

在components目录中创建Header.vue和Footer.vue组件。

Header.vue组件源码如下：

<template>
    <div>页头组件</div>
</template>

Footer.vue组件源码如下：

<template>
<div>页脚组件</div>
</template>

第二步：注册全局组件

我们此篇文章记录的是全局注册，因此我们需要针对全局的vue注册。

修改main.js中的代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
import  Header from "./components/Header.vue";
import  Footer from "./components/Footer.vue";
//获取到全局的vue对象
const app = createApp(App);
//将组件注册到vue对象中
app.component('com-header',Header);
app.component('com-footer',Footer);
//使用路由
app.use(router);
app.mount('#app');

第三：应用组件

在Home.vue 中修改源码如下：

当注册完组件后，com-header 和 com-footer 就可以作为像p、button等html标签一样使用。从而减少了很多代码。

<template>
    <com-header></com-header>
    Home页面
    <com-footer></com-footer>
</template>

第四步：查看效果

打开浏览器可看到如下效果：

THIS IS All ! Thanks!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746