什么是vue组件？如何编写SFC单文件组件 (vue学习 - Ch1.3 vue组件)

了解vue组件

上一章节的内容中我们了解了vue框架的整个文件结构，接下来我们将着手编写vue的组件，这也是前端工程化时代的一个重点。

为什么需要单独编写这样的组件，对于新手来说：

• 把每个组件的代码逻辑分开，方便后期维护 (也就是解耦)

• 分离每个组件的html结构，css样式表，js代码，看起来更直观

• 分开编写组件，以便复用和后期版本迭代 (同样也是解耦代码的一个优势)

什么是SFC

在javascript代码块中可以通过import来导入其他js文件，而通过vue的SFC (Single-File Components) 语法，你可以导入.vue文件来在页面中引用你自己编写好的vue组件。就像上一章中我们编写的：

<template>
  <div class="main">
    <button class="button">{{ buttonContext }}</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const buttonContext = ref(0);
</script>

<style>
.main {
  min-width: 20px;
}
.button {
  min-width: 20px;
}
</style>

这就是一个完整的单文件组件。

如何导入vue组件

只需要在<script>中写入：

import { componentName } from filePath

这里的componentName和filePath是：

• vue组件的文件名称

• vue组件文件的路径来源