组件的基本使用

组件的注册

一个Vue组件在使用前需要先被“注册”，这样才能在渲染模板时找到对应的组件。组件注册又分两种方式：

• 全局注册，可以在全局任何一个组件内使用
• 局部注册，只能在当前注册的范围内使用

全局注册

注册全局组件在 main.js 中配置：

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

//导入需要被全局注册的组件
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

// 注册全局组件
app.component(MyComponent.name, MyComponent);

app.mount('#app');

使用 app.component() 方法注册的全局组件，直接以标签的形式进行使用即可：

<template>
  <h1>父级组件</h1>
  <MyComponent></MyComponent>
</template>

局部注册组件

局部组件注册和使用：

<template>
  <h1>父级组件</h1>
  <MyComponent></MyComponent>
</template>
<script setup>
  import MyComponent from './components/MyComponent.vue';
</script>

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册。

组件的命名

组件的命名方式有两种：

• kebab-case 命名法；俗称短横线命名法，使用时必须严格按照短横线命名使用（例如：my-component，my-search）
• PascalCase 命名法；俗称帕斯卡命名法或大驼峰命名法，既可以按照帕斯卡名称进行使用，又可以转化为短横线名称进行使用（例如：MyComponent，my-component，MySearch，my-search）

全局注册和局部注册的区别

• 全局注册的组件可以在全局任何一个组件内使用，如果某些组件在开发期间的使用频率很高，推荐进行全局注册；
• 局部注册的组件只能在当前注册的范围内使用，如果某些组件只在特定的情况下会被用到，推荐进行局部注册。