首页手记 Vue3公共组件学习：从零开始搭建可复用组件

Vue3公共组件学习：从零开始搭建可复用组件

标签：

Vue.js

概述

本文详细介绍了如何进行Vue3公共组件学习，从Vue3的基础回顾到公共组件的概念、创建、复用以及维护，帮助开发者更好地理解和使用公共组件。通过学习，你可以掌握Vue3项目的搭建、公共组件的设计和测试方法，提高代码的复用性和可维护性。

Vue3基础回顾

Vue3简介

Vue.js 是一个用于构建用户界面的渐进式框架。与其它常见的前端框架如React和Angular相比，Vue.js因其轻量和灵活性而受到广泛欢迎。Vue3作为Vue.js的最新版本，引入了许多新特性和改进，使得开发体验更加流畅。这些新特性包括但不限于Composition API、响应式系统升级、更强大的TypeScript支持等。

Vue3的核心设计哲学是保持简洁，同时提供强大的功能。它允许开发者自由选择使用Vue的核心功能，也可以根据项目需求选择性地使用额外的库和工具，如Vue Router用于处理路由，Vuex用于状态管理等。

Vue3项目的基本搭建

搭建一个Vue3项目非常简单。首先，需要安装Node.js和npm（Node.js自带）。

创建Vue3项目可以使用Vue CLI，这是一个命令行工具，用于快速搭建Vue项目。可以通过以下步骤安装Vue CLI：

打开终端（Windows用户可以使用CMD或PowerShell，macOS和Linux用户可以使用终端）。
运行命令 npm install -g @vue/cli 安装Vue CLI。
创建一个新的Vue项目，使用 vue create my-project（my-project 是你的项目名称）。
进入项目目录 cd my-project。
运行 npm run serve 启动开发服务器，项目会在浏览器中自动打开。

在创建项目时，Vue CLI会询问一些配置选项，如是否使用TypeScript、选择预设的预处理器（如CSS、Sass、Less等）、安装路由和状态管理库等。根据项目需求选择合适的配置即可。

Vue3项目的基本结构如下：

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json
└── babel.config.js

在以上结构中，src 目录是项目的主要代码文件所在位置，而 public 目录则存放了所有静态文件，如 index.html。

示例代码

在 App.vue 中，你可以定义一个简单的Vue组件：

<template>
  <div id="app">
    <h1>Hello Vue3!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Welcome to my Vue3 project!'
    }
  }
}
</script>

<style>
/* 组件样式 */
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在 main.js 文件中，你可以导入 App.vue 并将其挂载到应用的根实例上：

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

createApp(App).mount('#app');

公共组件的概念

什么是公共组件

公共组件是指可以在多个地方复用的Vue组件。这些组件通常封装了一定的功能，可以在不同的Vue应用或不同的页面中多次使用而不必重复编写代码。公共组件的设计目的在于提高代码的可读性、可维护性和复用性。

公共组件通常包括以下几种类型：

通用UI组件：如按钮、输入框等。
业务逻辑组件：封装了一些特定业务逻辑，如搜索、过滤等。
自定义指令：对DOM元素进行更精细的控制和操作。
复杂表单验证：对表单中的字段进行验证。
交互组件：实现一些复杂的交互效果，如拖拽、轮播、弹窗等。

为什么需要公共组件

使用公共组件可以带来以下好处：

代码复用：相同的代码可以在多个地方使用，减少了重复的代码编写。
易维护：如果有修改需求，只需要修改一处即可影响所有使用该组件的地方。
提高开发效率：通过复用已有组件，减少了代码调试的时间。
代码清晰：公共组件的使用使得代码结构更加清晰，提高了可读性。

创建公共组件

组件的结构和生命周期

Vue组件通常由三部分组成：<template>、<script> 和 <style>。它们分别定义了组件的模板、脚本和样式。

组件模板

组件模板定义了组件的结构，可以通过标记语言来描述。比如，一个按钮组件可能包含一个 <button> 标签：

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

组件脚本

组件脚本部分定义了组件的逻辑，包括组件的数据、方法和生命周期方法等。例如：

<script>
export default {
  name: 'Button',
  props: {
    text: String
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

组件样式

组件样式部分定义了组件的外观，可以使用CSS来实现。样式可以作用于组件的任何部分，例如：

<style scoped>
button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
``

在Vue组件中，使用 `<script>` 来定义组件的逻辑， `<template>` 来定义组件的结构，而 `<style>` 则用于定义组件的样式。这些部分可以独立存在，也可以组合在一起，形成完整的组件。

### 组件的生命周期

组件的生命周期是指从创建到销毁的过程。在这个过程中，组件会经历多个状态，每个状态对应一个生命周期钩子。生命周期钩子允许我们在特定的时间点执行代码，以便进行必要的初始化或清理工作。以下是主要的生命周期钩子：

- `beforeCreate`：在实例初始化之前，数据观测 (data observer) 和方法 (methods) 还未设置。
- `created`：实例已经创建完成，此时可以访问实例的属性和方法，但尚未挂载到DOM上。
- `beforeMount`：在挂载之前，此时组件的模板已经被编译，但DOM节点尚未挂载。
- `mounted`：组件已经挂载到DOM上，此时可以访问DOM元素。
- `beforeUpdate`：在组件更新之前，此时可以访问更新前的数据状态。
- `updated`：组件更新后，此时可以访问更新后的DOM元素。
- `beforeUnmount`（Vue 3中的名称，Vue 2中称为`beforeDestroy`）：在组件卸载之前，此时可以执行清理工作。
- `unmounted`（Vue 3中的名称，Vue 2中称为`destroyed`）：组件已经卸载，不再需要任何资源。

### 示例代码

创建一个简单的公共按钮组件：

```vue
<template>
  <button @click="handleClick" :class="buttonClass">{{ text }}</button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      default: 'Click me'
    },
    buttonClass: {
      type: String,
      default: 'btn-primary'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>
.btn-primary {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
``

### 如何定义公共组件的模板、样式和脚本

定义公共组件时，可以通过以下步骤完成：

1. **定义模板**：在 `<template>` 标签内编写组件的HTML结构。
2. **定义脚本**：在 `<script>` 标签内编写组件的JavaScript逻辑。
3. **定义样式**：在 `<style>` 标签内编写组件的CSS样式。

在上述步骤中，可以使用 `props` 来定义组件的属性，使用 `methods` 来定义组件的方法，使用 `computed` 来定义计算属性，使用 `watch` 来监听属性的变化，使用 `data` 来定义组件的数据等。

### 示例代码

在一个名为 `InputField.vue` 的公共组件中，你可能定义如下样式和结构：

```vue
<template>
  <div class="input-field">
    <label>{{ label }}</label>
    <input :value="value" @input="onInput" />
  </div>
</template>

<script>
export default {
  name: 'InputField',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

<style scoped>
.input-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

此组件可以被其他页面或组件复用，通过传递不同的 label 和 value 参数来实现。

复用公共组件

如何在项目中引入和使用公共组件

在Vue项目中，通常会将公共组件放置在 src/components 目录下。通过导入这些组件并在需要的地方使用，可以方便地实现代码复用。

引入组件

在需要使用公共组件的文件中，首先需要导入它：

import Button from '@/components/Button.vue';

使用组件

然后在模板中使用这个组件：

<template>
  <div>
    <Button text="Click me" />
  </div>
</template>
``

### 示例代码

下面是一个在 `App.vue` 中使用 `Button` 组件的例子：

```vue
<template>
  <div id="app">
    <h1>Hello Vue3!</h1>
    <Button text="Click Me" />
  </div>
</template>

<script>
import Button from '@/components/Button.vue';

export default {
  components: {
    Button
  }
}
</script>
``

## 属性和事件的传递

公共组件可以通过 `props` 参数接收外部传入的数据，通过 `$emit` 事件向外传递数据。这样可以实现组件间的通信。

### 属性传递

在父组件中定义一个属性，然后传递给子组件：

```vue
<template>
  <div id="app">
    <h1>Hello Vue3!</h1>
    <Button text="Click Me" />
  </div>
</template>

<script>
import Button from '@/components/Button.vue';

export default {
  components: {
    Button
  }
}
</script>

事件监听

在子组件内部定义一个事件，并在父组件中监听这个事件：

<template>
  <div id="app">
    <h1>Hello Vue3!</h1>
    <Button text="Click Me" @click="handleButtonClick" />
  </div>
</template>

<script>
import Button from '@/components/Button.vue';

export default {
  components: {
    Button
  },
  methods: {
    handleButtonClick() {
      console.log('Button Clicked');
    }
  }
}
</script>

示例代码

你可以定义一个 InputField 组件，并在父组件中使用它：

<template>
  <div id="app">
    <InputField label="Username" v-model="username" />
  </div>
</template>

<script>
import InputField from '@/components/InputField.vue';

export default {
  components: {
    InputField
  },
  data() {
    return {
      username: ''
    }
  }
}
</script>

这将展示如何在父组件中通过 v-model 绑定数据并监听输入事件，同时通过 props 将属性传递给子组件。

组件通信

父组件和子组件之间的通信方法

父组件和子组件之间的通信主要通过 props 和 $emit 实现。

使用Props

父组件可以通过 props 将数据传递给子组件：

<template>
  <div id="app">
    <ChildComponent v-bind:message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  }
}
</script>

使用$emit

子组件可以通过 $emit 触发事件，并在父组件中监听这个事件：

<template>
  <div id="app">
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log('Child Event:', message);
    }
  }
}
</script>

示例代码

在 ChildComponent.vue 中，可以定义一个事件并触发它：

<template>
  <button @click="triggerEvent">Click me</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('child-event', 'Hello from Child!');
    }
  }
}
</script>

在父组件中，你可以监听这个事件：

<template>
  <div id="app">
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(message) {
      console.log('Child Event:', message);
    }
  }
}
</script>

兄弟组件之间的通信方法

兄弟组件之间的通信相对复杂一些，通常需要使用一个中间件来实现，这个中间件可以是Vuex、EventBus或Vue的根实例。

使用EventBus

EventBus是一个简单的通信中间件，可以用于兄弟组件之间的通信：

import Vue from 'vue';

export const EventBus = new Vue();

在需要通信的兄弟组件中，可以监听和发送事件：

<!-- ChildComponent1.vue -->
<script>
import { EventBus } from '../EventBus';

export default {
  created() {
    EventBus.$on('event-name', (data) => {
      console.log('Received:', data);
    });
  }
}
</script>

<!-- ChildComponent2.vue -->
<script>
import { EventBus } from '../EventBus';

export default {
  methods: {
    sendData() {
      EventBus.$emit('event-name', 'Data from ChildComponent2');
    }
  }
}
</script>

示例代码

在 ChildComponent1.vue 中监听事件：

<template>
  <div>
    <h3>ChildComponent1</h3>
  </div>
</template>

<script>
import { EventBus } from '../EventBus';

export default {
  created() {
    EventBus.$on('data-from-child2', (data) => {
      console.log('Received data:', data);
    });
  }
}
</script>

在 ChildComponent2.vue 中发送事件：

<template>
  <div>
    <h3>ChildComponent2</h3>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
import { EventBus } from '../EventBus';

export default {
  methods: {
    sendData() {
      EventBus.$emit('data-from-child2', 'Data from ChildComponent2');
    }
  }
}
</script>

在父组件中，你可以同时引入并使用这两个子组件：

<template>
  <div id="app">
    <ChildComponent1 />
    <ChildComponent2 />
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  }
}
</script>

组件测试与维护

组件测试的基本方法

组件测试是确保代码质量和一致性的关键步骤。Vue CLI提供了内置的支持，可以使用 vue-cli-service test:unit 命令来运行单元测试。

使用Vue Test Utils

Vue Test Utils 是Vue官方提供的测试工具，可以帮助开发者编写高效、准确的测试用例。它提供了各种模拟和断言函数，可以用来测试组件的渲染结果、事件处理、状态变化等。

示例代码

以下是一个使用Vue Test Utils测试简单按钮组件的例子：

import { shallowMount } from '@vue/test-utils';
import Button from '@/components/Button.vue';

describe('Button', () => {
  it('renders the correct text', () => {
    const wrapper = shallowMount(Button, {
      propsData: {
        text: 'Click Me'
      }
    });
    expect(wrapper.text()).toBe('Click Me');
  });

  it('emits a click event when clicked', () => {
    const wrapper = shallowMount(Button);
    wrapper.find('button').trigger('click');
    expect(wrapper.emitted('click')).toBeTruthy();
  });
});

在上述代码中，我们使用 shallowMount 方法来浅渲染组件，然后通过断言函数确保组件的行为符合预期。

组件的维护和更新

维护和更新组件时，需要注意以下几点：

保持组件的独立性：每个组件应该只负责一个功能，尽量减少组件间的依赖。
编写清晰的文档：为公共组件编写清晰的文档和示例，方便其他人理解和使用。
版本管理：为公共组件维护版本号，方便回溯历史版本。
性能优化：随着项目的增长，一些公共组件可能会变得越来越复杂，注意进行性能优化，避免不必要的计算和渲染。
测试覆盖率：确保组件的测试覆盖率足够高，能够覆盖各种使用场景。
社区贡献：如果组件是对外发布的，鼓励社区提供反馈和贡献。

示例代码

在组件中添加版本号和文档信息：

<template>
  <div>
    <h3>Button Component v1.0.0</h3>
    <button @click="handleClick">{{ text }}</button>
  </div>
</template>

<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}
</script>

<style scoped>
button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

在文档部分，你可以详细说明组件的使用方法、属性、事件等信息：

## Button Component

这是一个可复用的按钮组件，用于在不同页面和组件中使用。

### Props

- **text** (String) - 按钮上的文本，默认为 'Click me'。

### Events

- **click** - 当按钮被点击时触发。

### 示例

```vue
<Button text="Click Me" @click="handleClick" />

API

export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
}

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

茅侃侃

手记
篇

粉丝

10

获赞与收藏

21

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31442 350

网络编程入门教程

20个小节 12897 243

Pandas 入门教程

25个小节 18783 352

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3公共组件学习：从零开始搭建可复用组件

示例代码

组件模板

组件脚本

组件样式

引入组件

使用组件

事件监听

示例代码

使用Props

使用$emit

示例代码

使用EventBus

示例代码

使用Vue Test Utils

示例代码

示例代码

API

阅读免费教程