开发vue3组件

leijmdas

于 2025-08-01 19:37:50 发布

阅读量942

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/leijmdas/article/details/149840545

下面从核心概念到高级实践，系统介绍 Vue 3 组件开发的关键技术点和最佳实践：

🧱 一、组件基础与创建

单文件组件结构

Vue 3 组件通常采用单文件组件（SFC，.vue 文件）格式：
```
<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello Vue 3!');
</script>
<style scoped>
div { color: #42b983; }
</style>
```
- <template>：定义 HTML 模板结构
- <script setup>：使用 Composition API 编写逻辑（推荐语法糖）
- <style scoped>：限定样式的组件作用域

组件注册方式

全局注册（适用于高频组件）：

// main.js
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 LocalComponent from './LocalComponent.vue'; // 局部引入
</script>

⚙️ 二、Composition API 核心实践

响应式数据管理

ref：处理基本类型（如字符串、数字）

reactive：处理对象/数组等复杂结构

<script setup>
import { ref, reactive } from 'vue';
const count = ref(0); // 基本类型
const user = reactive({ name: 'Alice', age: 25 }); // 复杂对象
const increment = () => { count.value++; };
</script>

逻辑复用（组合式函数）

将重复逻辑抽离为独立函数：

// useCounter.js
import { ref } from 'vue';
export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  return { count, increment };
}

组件中调用：

<script setup>
import { useCounter } from './useCounter';
const { count, increment } = useCounter();
</script>

📡 三、组件通信方式详解

父子通信

Props（父 → 子）：

<!-- 子组件 -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: Number
});
</script>

<!-- 父组件 -->
<ChildComponent :title="动态标题" :count="5" />

事件（子 → 父）：

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['update']);
const handleClick = () => emit('update', newValue);
</script>

<!-- 父组件 -->
<ChildComponent @update="handleUpdate" />

跨层级通信

provide/inject：

// 祖先组件
import { provide } from 'vue';
provide('key', data);
// 后代组件
import { inject } from 'vue';
const data = inject('key');

全局事件总线（mitt）：

// emitter.js
import mitt from 'mitt';
export default mitt();
// 组件A（发送）
emitter.emit('event', data);
// 组件B（接收）
emitter.on('event', (data) => { ... });

♻️ 四、可复用组件封装

属性驱动设计

通过 defineProps 接收参数实现组件多样化：

<script setup>
defineProps({
  type: { type: String, default: 'default' },
  size: { type: String, validator: v => ['small', 'medium'].includes(v) },
  disabled: Boolean
});
</script>

插槽扩展能力

支持默认插槽、具名插槽和作用域插槽：

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="internalData"></slot> <!-- 作用域插槽 -->
    <slot name="footer"></slot>
  </div>
</template>
<!-- 父组件 -->
<ChildComponent>
  <template #header>标题</template>
  <template #default="{ data }">{{ data }}</template>
</ChildComponent>

🚀 五、高级技巧与优化

JSX 开发动态组件

适合复杂渲染逻辑场景（需配置 @vitejs/plugin-vue-jsx）：

export default {
  setup() {
    const count = ref(0);
    return () => (
      <div>
        <button onClick={() => count.value++}>+</button>
        <p>Count: {count.value}</p>
      </div>
    );
  }
};