组件基础：创建与注册组件

组件是 Vue 3 的核心概念之一，它允许开发者将应用分解为可复用、可维护的独立模块。通过组件化开发，你可以将复杂的界面拆分为小块，每块专注于单一功能。本节将介绍如何创建和注册 Vue 3 组件，包括全局注册和局部注册两种方式，并通过示例展示组件的基本使用。

什么是组件？

在 Vue 3 中，组件是一个具有独立模板、逻辑和样式的可复用单元。每个组件本质上是一个小型 Vue 实例，可以拥有自己的数据、方法和生命周期。组件化的优势包括：

  • 复用性：相同的功能无需重复编写。
  • 可维护性：代码分块管理，易于修改和调试。
  • 清晰性：将 UI 和逻辑按功能分开。

Vue 3 支持单文件组件（SFC，.vue 文件），这是最常见的组件编写方式，包含 <template>、<script> 和 <style> 三部分。

创建组件

让我们从创建第一个简单组件开始。

示例：创建一个问候组件

在 src/components/ 目录下创建 Greeting.vue：

<template>
  <div>
    <h2>{{ greeting }}</h2>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const greeting = ref('Hello from Component!');
    return { greeting };
  }
};
</script>

<style scoped>
h2 {
  color: #2c3e50;
}
</style>
  • 模板：显示一个动态的问候语。
  • 脚本：使用 ref 定义响应式数据。
  • 样式：使用 scoped 限定样式作用域。

注册组件

创建组件后，需要将其注册到应用中才能使用。Vue 3 提供两种注册方式：全局注册和局部注册。

1. 全局注册

全局注册的组件可以在整个应用中使用，通常在入口文件 main.js 中完成。

示例：全局注册 Greeting 组件

修改 src/main.js：

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

const app = createApp(App);
app.component('Greeting', Greeting); // 全局注册
app.mount('#app');

然后在 src/App.vue 中使用：

<template>
  <div>
    <h1>欢迎使用 Vue 3</h1>
    <Greeting />
  </div>
</template>

<script>
export default {
  setup() {}
};
</script>
  • 效果：页面显示“欢迎使用 Vue 3”和“Hello from Component!”。
  • 命名：组件名通常使用 PascalCase（如 Greeting），在模板中可以写为 <Greeting> 或 <greeting>。

注意事项

  • 全局注册适合小型项目或频繁使用的组件。
  • 大型项目中过度使用可能导致打包体积增加，建议谨慎使用。

2. 局部注册

局部注册的组件只在特定组件内部可用，通过 components 选项定义。

示例：局部注册 Greeting 组件

修改 src/App.vue：

<template>
  <div>
    <h1>欢迎使用 Vue 3</h1>
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  setup() {},
  components: {
    Greeting // 局部注册
  }
};
</script>
  • 效果：与全局注册相同，但 Greeting 只在 App.vue 中可用。
  • 优势：按需加载，避免全局污染，支持 Tree-shaking 优化。

组件的复用

组件的强大之处在于复用性。让我们扩展 Greeting 组件，使其支持动态输入。

示例：带参数的 Greeting 组件

修改 src/components/Greeting.vue：

<template>
  <div>
    <h2>{{ greeting }}, {{ name }}!</h2>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    name: {
      type: String,
      default: 'Guest'
    }
  },
  setup(props) {
    const greeting = ref('Hello');
    return { greeting, name: props.name };
  }
};
</script>

<style scoped>
h2 {
  color: #2c3e50;
}
</style>

在 src/App.vue 中使用：

<template>
  <div>
    <h1>欢迎使用 Vue 3</h1>
    <Greeting name="Alice" />
    <Greeting name="Bob" />
    <Greeting /> <!-- 使用默认值 -->
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  setup() {},
  components: { Greeting }
};
</script>
  • 效果：
    欢迎使用 Vue 3
Hello, Alice!
Hello, Bob!
Hello, Guest!
  • 解析：
    • props 定义组件接收的属性，name 有默认值 Guest。
    • 在 setup 中通过 props 参数访问传入值。

动态组件

Vue 3 支持 <component> 标签实现动态组件切换。

示例：切换组件

修改 src/App.vue：

<template>
  <div>
    <h1>动态组件示例</h1>
    <button @click="currentComponent = 'Greeting'">显示 Greeting</button>
    <button @click="currentComponent = 'Counter'">显示 Counter</button>
    <component :is="currentComponent" name="User" />
  </div>
</template>

<script>
import { ref } from 'vue';
import Greeting from './components/Greeting.vue';
import Counter from './components/Counter.vue';

export default {
  setup() {
    const currentComponent = ref('Greeting');
    return { currentComponent };
  },
  components: {
    Greeting,
    Counter
  }
};
</script>

创建 src/components/Counter.vue：

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: ['name'],
  setup() {
    const count = ref(0);
    return { count };
  }
};
</script>
  • 效果：点击按钮切换显示 Greeting 或 Counter 组件。
  • 解析：:is 绑定组件名称，实现动态渲染。

总结

通过本节，你学会了如何创建和注册 Vue 3 组件，包括全局和局部注册方式，并初步体验了组件的复用性和动态性。组件是 Vue 开发的基础，后续章节将深入探讨 Props、事件通信等高级用法。现在，尝试创建自己的组件并在项目中使用吧，你的组件化之旅才刚刚开始！

Last Updated::