首页手记 Vue3公共组件学习：从入门到实战

Vue3公共组件学习：从入门到实战

标签：

前端工具 Vue.js

概述

Vue3公共组件学习涵盖了公共组件的定义、作用、创建、复用及样式处理等各个方面。文章详细介绍了如何在Vue3项目中创建和使用公共组件，包括环境搭建、组件创建步骤和示例代码。此外，还讨论了公共组件的事件处理和版本管理，确保组件的长期维护和更新。通过本文，读者可以全面了解并掌握Vue3公共组件的开发和使用技巧。

Vue3公共组件概述

什么是Vue3公共组件

Vue3公共组件是可复用的Vue组件，通常用于构建UI界面中的通用功能，如按钮、导航栏、对话框等。公共组件通过封装特定功能，使得在多个页面或项目中重复使用相同的功能更加方便和高效。这种复用不仅提高了开发效率，还保证了代码的一致性和可维护性。

公共组件的作用与优势

公共组件的作用不仅在于减少重复代码，还在于维护代码一致性与提高开发效率。通过创建公共组件，开发者可以集中精力处理特定的功能需求，而不必每次实现相同的功能代码。

减少代码冗余：公共组件可以被多次引用，避免了相同代码的重复编写。
提高代码一致性：通过统一维护公共组件，确保了各个页面中的相同功能表现一致。
提高开发效率：开发人员可以专注于业务逻辑，而无需处理基础组件的实现细节。

常见的公共组件类型

常见的公共组件类型包括但不限于按钮组件、表格组件、导航栏组件、模态框组件等。这些组件通常用于构建用户界面的基础元素，使得开发者可以快速构建出复杂的页面。

按钮组件：用于交互操作，如提交表单、确认/取消等。
表格组件：用于展示结构化的数据，如列表、统计等。
导航栏组件：用于页面导航，如顶部导航栏或侧边栏。
模态框组件：用于弹出对话框，如确认对话框、提示消息等。

如何创建Vue3公共组件

准备工作：安装Vue3环境

在开始创建Vue3公共组件前，需要先搭建好Vue3的开发环境。以下是安装Vue3的基本步骤：

确保已安装Node.js。
使用npm或yarn安装Vue CLI。

使用Vue CLI创建一个新的Vue3项目。

vue create my-vue3-project
cd my-vue3-project
npm install

创建基础公共组件步骤

创建公共组件的基本步骤包括定义组件模板、逻辑、样式以及导出组件供其他文件使用。

创建组件文件：创建一个.vue文件。
定义模板：指定组件的HTML结构。
添加逻辑：编写组件的JavaScript逻辑。
添加样式：编写组件的CSS样式。
导出组件：导出组件，以便在其他文件中使用。

代码示例：按钮组件、卡片组件

按钮组件

<!-- Button.vue -->
<template>
  <button class="custom-button" @click="handleClick">
    {{ text }}
  </button>
</template>

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

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

卡片组件

<!-- Card.vue -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    title: {
      type: String,
      default: 'Default Title'
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  width: 100%;
  max-width: 500px;
}
</style>

如何复用公共组件

组件注册与使用方法

在Vue3项目中，组件可以通过全局注册和局部注册两种方式来使用。全局注册使得组件可以在项目的任何地方使用，而局部注册则是在具体的父组件中定义和使用。

全局注册

// main.js
import { createApp } from 'vue';
import Button from './components/Button.vue';
import Card from './components/Card.vue';

const app = createApp(App);
app.component('Button', Button);
app.component('Card', Card);
app.mount('#app');

局部注册

<template>
  <div>
    <Button text="Click Me" @click="handleButton" />
    <Card>
      <h2>{{ title }}</h2>
      <p>{{ description }}</p>
    </Card>
  </div>
</template>

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

export default {
  components: {
    Button,
    Card
  },
  data() {
    return {
      title: 'My Card Title',
      description: 'This is a description for the card.'
    };
  },
  methods: {
    handleButton() {
      alert('Button clicked!');
    }
  }
}
</script>

通过props传递数据

Props允许父组件向子组件传递信息。子组件通过定义props来接收这些信息，并且可以根据需要处理它们。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Default Message'
    }
  }
}
</script>

在父组件中使用：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

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

使用插槽(slot)自定义内容

插槽允许父组件向子组件传递内容，子组件可以决定如何渲染这些内容。

<!-- CustomContainer.vue -->
<template>
  <div class="custom-container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'CustomContainer'
}
</script>

<style scoped>
.custom-container {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #fff;
  margin: 10px 0;
}
</style>

在父组件中使用：

<template>
  <div>
    <CustomContainer>
      <p>Custom content here</p>
    </CustomContainer>
  </div>
</template>

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

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

Vue3公共组件的样式处理

使用CSS Modules

CSS Modules允许每个组件使用自己的CSS样式，而不会与其他组件的样式发生冲突。通过局部样式文件，每个组件可以有自己的样式名称。

<!-- Card.module.css -->
.custom-card {
  width: 100%;
  max-width: 500px;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
}

.title {
  font-size: 1.5em;
  color: #333;
}

在组件中使用：

<!-- Card.vue -->
<template>
  <div :class="$style.customCard">
    <h2 :class="$style.title">{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import {} from './Card.module.css';

export default defineComponent({
  name: 'Card',
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    description: {
      type: String,
      default: 'Default Description'
    }
  }
});
</script>

使用全局样式库（如Ant Design）

全局样式库如Ant Design提供了丰富的UI组件和一致的样式。在项目中引入全局样式库可以快速构建出美观且一致的界面。

npm install antd

在组件中使用：

<template>
  <a-button type="primary" @click="handleClick">Click Me</a-button>
</template>

<script>
import { defineComponent } from 'vue';
import { Button } from 'antd';

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

<script setup>
import { Button } from 'antd';
</script>

管理组件的类名与样式冲突

为了避免样式冲突，可以使用CSS Modules或SCSS命名空间等技术。此外，确保每个组件的样式只应用于组件内部，而不会影响其他组件的样式。

<!-- CustomButton.module.css -->
.custom-button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #2c9b6d;
}

在组件中使用：

<!-- CustomButton.vue -->
<template>
  <button :class="$style.customButton">Custom Button</button>
</template>

<script setup>
import {} from './CustomButton.module.css';
</script>

Vue3公共组件的事件处理

在公共组件中定义事件

公共组件可以通过定义事件来实现与父组件的交互。事件的定义可以通过$emit来触发，并传递参数给父组件。

<!-- CustomButton.vue -->
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['click']);

function handleClick() {
  emits('click');
}
</script>

在父组件中监听事件

父组件可以通过v-on指令来监听子组件定义的事件，并执行相应操作。

<template>
  <div>
    <CustomButton @click="handleButtonClick" />
  </div>
</template>

<script setup>
import CustomButton from './CustomButton.vue';

function handleButtonClick() {
  alert('Button clicked!');
}
</script>

事件冒泡与事件捕获

Vue3中的事件冒泡和事件捕获可以用于更灵活地控制事件处理逻辑。事件冒泡是从子元素向父元素逐级触发，而事件捕获则是从父元素向子元素逐级触发。

<template>
  <div @click="handleParentClick">
    <CustomButton @click="handleButtonClick" />
  </div>
</template>

<script setup>
import CustomButton from './CustomButton.vue';

function handleParentClick(e) {
  console.log('Parent click:', e);
}

function handleButtonClick(e) {
  console.log('Button click:', e);
}
</script>

Vue3公共组件的持续维护与更新

版本管理：如何管理组件版本

管理组件的版本是确保组件更新内容可追踪和可追溯的重要手段。这可以通过使用版本控制系统如Git来实现，维护一个清晰的版本历史记录。

使用Git管理版本：
- 使用git tag给每次重要的更新打版本标签。
- 使用git commit记录每次更新的内容。
- 使用git push将更新推送到远程仓库。

git tag v1.0.0
git push --tags
git commit -m "Update component v1.0.1"
git push origin main

代码质量：代码审查与重构

为了保证代码的质量和可维护性，可以引入代码审查和重构的流程。

代码审查：
- 定期进行代码审查，确保代码遵循团队的编码规范。
- 使用代码审查工具如GitHub的Pull Request来检测代码问题。
重构：
- 定期重构代码，提高代码的可维护性和可读性。
- 确保重构过程中的代码质量和功能稳定性不受影响。

组件测试：单元测试与集成测试

通过单元测试和集成测试可以确保每个组件的功能正确，并且与其他组件协同工作良好。

单元测试：
- 使用Jest等测试框架来编写单元测试。
- 测试组件的输入输出、事件处理等关键逻辑。
集成测试：
- 使用Cypress等测试框架进行端到端的测试。
- 验证组件在实际应用中的表现和交互行为。

// Button.test.js
import { mount } from '@vue/test-utils';
import Button from '../src/components/Button.vue';

describe('Button.vue', () => {
  it('click event is emitted', async () => {
    const wrapper = mount(Button, {
      props: {
        text: 'Click Me'
      }
    });
    await wrapper.trigger('click');
    expect(wrapper.emitted().click).toBeTruthy();
  });
});

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

函数式编程

手记
篇

粉丝

14

获赞与收藏

30

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3公共组件学习：从入门到实战

什么是Vue3公共组件

公共组件的作用与优势

常见的公共组件类型

准备工作：安装Vue3环境

创建基础公共组件步骤

代码示例：按钮组件、卡片组件

按钮组件

卡片组件

组件注册与使用方法

全局注册

局部注册

通过props传递数据

使用插槽(slot)自定义内容

使用CSS Modules

使用全局样式库（如Ant Design）

管理组件的类名与样式冲突

在公共组件中定义事件

在父组件中监听事件

事件冒泡与事件捕获

版本管理：如何管理组件版本

代码质量：代码审查与重构

组件测试：单元测试与集成测试

阅读免费教程