1、创建组件

组件（component）是 Vue.js 最强大的功能之一。通过开发组件可以封装可服用的代码，将封装好的代码注册成标签，扩展 HTML 元素的功能。几乎任意类型应用的界面都可以抽象为一个组件树，而组件树可以用独立可复用的组件来构建。

组件是 Vue 自定义的一种文件，以 .vue 作为文件的后缀名。

创建组件的语法格式：

<!-- 组件的内容 -->
<template>
    
</template>

<!-- 组件的脚本 -->
<script>
export default {
    
}
</script>

<!-- 组件的样式 -->
<style scoped>

</style>

【实例】创建 MyComponent.vue 组件文件，实现用户信息的显示。

<template>
    <p class="b-name">博客信息：{{blogName}}</p>
    <p class="b-url">博客地址：{{blogUrl}}</p>
</template>

<script>
export default {
    data() {
        return {
            blogName: '您好，欢迎访问 pan_junbiao的博客',
            blogUrl: 'https://blog.csdn.net/pan_junbiao'
        }
    }
}
</script>

<style scoped>
    .b-name{
        font-size: 26px;
        color: red;
    }

    .b-url{
        font-size: 24px;
        color:blue;
    }
</style>

项目目录结果如下图：

2、注册组件

在使用组件之前需要将组件注册到应用中。Vue.js 提供了两种注册方式，分别是局部注册和全局注册，下面分别进行介绍。

2.1 注册局部组件

通过 Vue 实例中的 components 选项可以注册一个局部。对于 components 对象中的每个属性来说，其属性就是定义组件的名称，其属性值就是这个组件的选项对象。

【实例】在 App.vue 根组件中，注册局部组件。

<template>
  <!-- 第三步：使用组件 -->
  <MyComponent />
</template>

<script>
//第一步：引用组件
import MyComponent from './components/MyComponent.vue'

export default {
  //第二步：注册组件
  components: {
    MyComponent,
  }
}
</script>

执行结果：

2.2 注册全局组件

全局注册的组件也叫全局组件。

注册一个全局组件的语法格式如下：

app.component(tagName, options)

参数的说明如下：

tagName：表示定义的组件名称。

options：表示组件的选项对象。

【实例】创建并注册一个全局组件。

（1）创建 GlobalComponent.vue 全局组件

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

（2）在 main.js 文件中，注册全局组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//第一步：引用组件
import GlobalComponent from './components/GlobalComponent.vue'

const app = createApp(App);

app.use(router);

//第二部：注册全局组件
app.component("GlobalComponent", GlobalComponent);

app.mount('#app');

（3）在 App.vue 根组件中，使用全局组件

<template>
  <!-- 第三步：使用组件 -->
  <GlobalComponent />
  <MyComponent />
</template>

执行结果：