Vue3中如何定义组件

在 Vue 3 结合 TypeScript 中，自定义组件可以极大地提高代码的可维护性和可扩展性。以下是自定义组件的步骤：

**一、创建自定义组件的步骤**

1. 创建组件文件：创建一个 `.vue` 文件，用于定义组件的模板、脚本和样式。例如，可以创建一个名为 `MyCustomComponent.vue` 的文件。
2. 定义模板：在模板部分（`<template>`标签内），编写组件的 HTML 结构。这是组件在页面上呈现的外观。
3. 定义脚本：在脚本部分（`<script lang="ts">`标签内），使用 `defineComponent` 函数来定义组件的逻辑。可以指定组件的名称、接收的属性（props）、数据（data）、方法（methods）等。
4. 定义样式：在样式部分（`<style>`标签内），可以使用 CSS 或 SCSS、Less 等预处理器来定义组件的样式。可以使用 `scoped` 属性来确保样式只应用于当前组件，避免样式冲突。
5. 导入和注册组件：在需要使用自定义组件的其他组件中，通过 `import` 语句导入自定义组件，并在组件的选项中注册该组件，以便在模板中使用。

**二、代码示例**

以下是一个自定义组件的示例代码：

<!-- MyCustomComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyCustomComponent',
  props: {
    title: {
      type: String,
      required: true,
    },
    description: {
      type: String,
      default: '',
    },
  },
});
</script>

<style scoped>
h1 {
  color: blue;
}
p {
  font-size: 14px;
}
</style>

<!-- App.vue -->
<template>
  <div>
    <MyCustomComponent title="Hello" description="This is a custom component." />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MyCustomComponent from './MyCustomComponent.vue';

export default defineComponent({
  components: {
    MyCustomComponent,
  },
});
</script>

**三、代码解释**

1. 在 `MyCustomComponent.vue` 文件中：
   - `<template>` 部分定义了组件的 HTML 结构，包含一个 `<h1>` 标题和一个 `<p>` 段落，分别显示 `title` 和 `description` 属性的值。
   - `<script lang="ts">` 部分使用 `defineComponent` 函数定义了组件的逻辑。
     - `name` 属性指定了组件的名称为 `MyCustomComponent`。
     - `props` 属性定义了组件接收的两个属性 `title` 和 `description`。`title` 属性是字符串类型且必填，`description` 属性也是字符串类型但有默认值为空字符串。
   - `<style scoped>` 部分定义了组件的样式，将 `<h1>` 标题的颜色设置为蓝色，`<p>` 段落的字体大小设置为 14 像素。
2. 在 `App.vue` 文件中：
   - `<template>` 部分使用自定义组件 `MyCustomComponent`，并传递了 `title` 和 `description` 属性的值。
   - `<script lang="ts">` 部分导入了 `MyCustomComponent` 组件，并在 `components` 选项中注册，以便在模板中使用。

通过以上步骤和代码，我们成功地在 Vue 3 和 TypeScript 中创建并使用了一个自定义组件。