Vue 3 创建单文件组件 (SFC – Single File Component)

Vue 的 单文件组件 (SFC) 是 Vue 组件的一种标准格式，文件扩展名为 .vue，它将 HTML、CSS 和 JavaScript 组合在一个文件中，使组件更容易组织和维护。

1. 单文件组件 (SFC) 结构

Vue 3 的 SFC 由三个核心部分组成：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <!-- 组件的 HTML 结构 -->
</template>
 
<script>
export default {
  // 组件逻辑（数据、方法等）
}
</script>
 
<style>
/* 组件的 CSS 样式 */
</style>

2. 创建 Vue 3 单文件组件

假设我们创建一个 HelloWorld.vue 组件，它会接收一个 message 作为 props，并在页面上显示。

步骤 1：创建 HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <h1>{{ message }}</h1>
</template>
 
<script>
export default {
  props: {
    message: String
  }
};
</script>
 
<style scoped>
h1 {
  color: blue;
}
</style>
  • props 用于接收父组件传递的数据。
  • scoped 关键字表示样式仅作用于当前组件。

3. 在父组件中使用

步骤 2：在 App.vue 中引入 HelloWorld.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <HelloWorld message="欢迎使用 Vue 3 组件!" />
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue';
 
export default {
  components: {
    HelloWorld
  }
};
</script>
  • 使用 import 引入子组件。
  • 在 components 选项中注册该组件。
  • 通过 props 传递数据。

4. 使用 setup() 语法

Vue 3 组合式 API (setup()) 也可以用于 SFC 组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <h1>{{ message }}</h1>
</template>
 
<script>
import { defineProps } from 'vue';
 
export default {
  setup() {
    const props = defineProps(['message']);
    return { message: props.message };
  }
};
</script>
 
<style scoped>
h1 {
  color: green;
}
</style>
  • defineProps() 用于接收 props，适用于 setup() 语法。

5. 组件间通信

（1）子组件向父组件发送事件

子组件 (ChildComponent.vue)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <button @click="sendMessage">点击发送</button>
</template>
 
<script>
import { defineEmits } from 'vue';
 
export default {
  setup() {
    const emit = defineEmits(['customEvent']);
     
    const sendMessage = () => {
      emit('customEvent', '来自子组件的消息');
    };
 
    return { sendMessage };
  }
};
</script>

父组件 (App.vue)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <ChildComponent @customEvent="handleMessage" />
</template>
 
<script>
import ChildComponent from './components/ChildComponent.vue';
 
export default {
  setup() {
    const handleMessage = (msg) => {
      console.log("收到子组件消息:", msg);
    };
     
    return { handleMessage };
  },
  components: { ChildComponent }
};
</script>
  • emit() 触发 customEvent 事件，父组件监听并执行 handleMessage() 方法。

6. 组件 style 样式

Vue SFC 允许在 style 标签内编写 CSS，并提供 scoped 选项：

1
2
3
4
5
<style scoped>
h1 {
  color: red;
}
</style>
  • scoped 让 CSS 仅作用于当前组件，避免影响全局。

7. 组件拆分与组织

在 Vue 3 项目中，通常会将组件存放在 src/components 目录下，例如：

1
2
3
4
5
6
7
/src
 ├── /components
 │    ├── HelloWorld.vue
 │    ├── Navbar.vue
 │    ├── Footer.vue
 ├── App.vue
 ├── main.js
  • 组件可以根据功能拆分到不同文件夹，如 views/、layouts/。

8. 组件的 defineOptions()（Vue 3.3+）

在 Vue 3.3+ 版本，可以使用 defineOptions() 来更方便地定义 name：

1
2
3
4
5
<script setup>
import { defineOptions } from 'vue';
 
defineOptions({ name: 'MyComponent' });
</script>
  • defineOptions({ name: 'MyComponent' }) 等价于 export default { name: 'MyComponent' }。

总结

  • Vue 3 SFC 由 <template>、<script> 和 <style> 组成。
  • 组件拆分 提高可维护性，父子组件通过 props 和 emit() 进行通信。
  • 组合式 API 提供 setup() 方式，适用于逻辑复用。
  • Scoped 样式 让 CSS 仅影响当前组件。

通过 Vue 3 的 SFC，我们可以更高效地开发和组织 Vue 项目 🚀