Vue3 从入门到放弃 （第三篇.组件的使用）

上一篇讲到了，Vue3的创建第一个Web应用.Vue3 从入门到放弃 （第二篇.创建第一个Web应用）_Meta.Qing的博客-CSDN博客

今天组件的基础与使用，并且使用实际例子，来更好的展示效果.

首先,什么是组件（Component）?

组件(Component)是Vue中的一个重要概念,是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

定义一个组件

我们继续接着上节文章，在工程里 src/components目录下新建一个MetaHeader.vue的文件

 当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

然后，我们再MetaHeader.vue添加以下代码:

<script setup>
</script>

<template>
<!-- 定义一个头部组件 -->
  <div class="meta-header">
    <!-- 左侧logo -->
    <div class="meta-header-logo">Meta.Qing LOGO</div>
    <nav>
        <!-- 右侧导航栏 -->
      <a href="/HTML/">HTML</a> | <a href="/css/">CSS</a> |
      <a href="/JavaScript/">JavaScript</a> | <a href="/jQuery/">jQuery</a> |
      <a href="/Vue3/">Vue3</a> | <a href="/React/">React</a> |
      <a href="/Angular/">Angular</a>
    </nav>
  </div>
</template>

<style scoped>
/* 弹性盒子方式来布局 */
.meta-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #1fd6e766;
  padding: 10px;
}
.meta-header-logo {
  font-weight: bold;
  color: rgba(28, 29, 31, 0.804);
}
</style>

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

 

1.局部注册（推荐）

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

要使用一个子组件，我们需要在父组件中导入它。

父组件 src/views/Home/HomeIndex.vue

<script setup>
// 导入头部组件
import MetaHeader from '../../components/MetaHeader.vue';
</script>

<template>
  <!-- 使用头部组件，可以重复调用 -->
  <meta-header></meta-header>
  <h1>我们第一个vue3应用</h1>
</template>

通过 <script setup>，导入的组件都在模板中直接可用.

2.全局注册

我们在main.js中添加以下代码

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import  MetaHeader from './components/MetaHeader.vue'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)
// 全局注册
app.component(
    'MetaHeader',
    MetaHeader
  )
app.use(createPinia())
app.use(router)

app.mount('#app')

提示:全局注册虽然很方便，但有以下几个问题：

1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

然后我们运行

npm run dev

浏览器打开:http://127.0.0.1:5173/#/

 至此，组件简单使用大功告成啦.