当前位置：首页 > news >正文

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

news 来源：原创 2024/5/20 22:37:58

上一篇讲到了，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>

使用组件

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

父组件 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>，导入的组件都在模板中直接可用.

然后我们运行