组件基础：用 .vue 文件定义组件

ynglan2026/05/01vue-beginnerVue 3 组件 props emit

组件基础：用 .vue 文件定义组件

组件是 Vue 最强大的特性之一。它让你把页面拆成独立、可复用的部分。

什么是组件

一个 .vue 文件就是一个组件。它包含：

<template>：HTML 结构
<script setup>：逻辑代码
<style>：样式

每个组件都是独立的功能单元，可以被其他组件引用。

创建第一个组件

在 src/components/ 下创建 UserCard.vue：

<template>
  <div class="card">
    <h3>{{ name }}</h3>
    <p>{{ bio }}</p>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  name: string
  bio: string
}>()
</script>

<style scoped>
.card {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>

使用组件

在父组件中引入并使用：

<template>
  <UserCard name="张三" bio="前端开发者" />
  <UserCard name="李四" bio="后端开发者" />
</template>

<script setup>
import UserCard from './components/UserCard.vue'
</script>

渲染结果是两个独立的卡片，互不影响。

传递 Props

用 defineProps 定义组件接受的属性：

<script setup lang="ts">
// 带默认值
const props = withDefaults(
  defineProps<{
    name: string
    age?: number
    bio?: string
  }>(),
  {
    age: 0,
    bio: '暂无简介'
  }
)
</script>

模板里直接用 {{ name }}、{{ age }}。

发出事件：emit

组件向父组件传递消息，用 emit：

子组件 LikeButton.vue：

<template>
  <button @click="handleClick">👍 {{ count }}</button>
</template>

<script setup lang="ts">
const props = defineProps<{ initialCount?: number }>()
const emit = defineEmits<{ (e: 'liked', count: number): void }>()

const count = ref(props.initialCount || 0)

function handleClick() {
  count.value++
  emit('liked', count.value)
}
</script>

父组件使用：

<template>
  <LikeButton @liked="onLiked" />
</template>

<script setup>
function onLiked(count: number) {
  console.log('被点赞了，当前次数：', count)
}
</script>

组件命名规范

Vue 中约定俗成的命名方式：

<!-- PascalCase（推荐） -->
<UserCard />
<HelloWorld />

<!-- kebab-case（也行） -->
<user-card />
<hello-world />

组件的文件组织

src/
├── components/
│   ├── UserCard.vue
│   ├── ProductList.vue
│   ├── Modal.vue
│   └── index.ts         # 组件统一导出

可以建一个 index.ts 统一导出：

export { default as UserCard } from './UserCard.vue'
export { default as ProductList } from './ProductList.vue'

然后父组件简写：

<script setup>
import { UserCard, ProductList } from './components'
</script>

总结

.vue 文件就是一个组件，包含模板、逻辑、样式
用 defineProps 定义属性，用 defineEmits 定义事件
组件命名用 PascalCase
props 单向数据流，事件是组件间通信的方式

下篇讲 Vue 组件的生命周期钩子——组件从创建到销毁经历了什么。

组件基础：用 .vue 文件定义组件

ON THIS PAGE