Vue 3 组件命名和使用

Vue 3 组件的命名和使用有一些最佳实践，以提高代码的可读性、可维护性和一致性。

1. 组件命名

Vue 组件通常使用 PascalCase 或 kebab-case，具体选择取决于使用方式：

MyComponent.vue ✅
myComponent.vue ❌
my-component.vue ✅

2. 组件使用

全局注册

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

局部注册

<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <MyComponent />
</template>

3. Prop 传递

<script setup>
defineProps({ title: String });
</script>

<template>
  <h1>{{ title }}</h1>
</template>

4. 事件传递

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateMessage']);

const sendMessage = () => {
  emit('updateMessage', 'Hello from child!');
};
</script>

5. 插槽 (Slots)

<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

6. 命名规则总结

• 组件文件名使用 PascalCase
• 组件名与 import 变量名一致
• 使用 defineProps、defineEmits 代替 props、emit

7. 推荐写法

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

<template>
  <ChildComponent />
</template>