首页手记 Vue3公共组件教程：新手入门指南

Vue3公共组件教程：新手入门指南

标签：

Vue.js

本文介绍了如何在Vue3项目中创建和使用公共组件，包括公共组件的基础概念、创建步骤、组件引入和使用方法。通过遵循组件化的原则，开发者可以提高代码复用性和维护性，同时确保应用的一致性和用户体验。本文详细讲解了vue3公共组件教程，帮助开发者掌握公共组件的开发和管理技巧。

Vue3公共组件基础介绍

什么是公共组件

在Vue3项目中，公共组件是指能够被多个页面或组件复用的组件。这些组件通常是UI组件，如按钮、表单、导航条等，但也可以是更复杂的逻辑组件，如数据展示组件或交互组件。公共组件的一个主要优点是它们可以提高代码的复用性，减少代码的冗余，使得项目更加模块化。

为什么需要公共组件

提高代码复用性：公共组件可以在多个页面或组件中复用，减少重复代码，提高开发效率。
保持一致性：公共组件可以确保应用中的UI元素在不同页面中表现一致，提升用户体验。
易于维护：公共组件的更改只需在一处修改，这样可以减少维护成本并降低风险。
提高开发效率：公共组件可以作为基础组件库，新项目可以直接使用这些组件，无需从头开始编写代码。

Vue3公共组件的特点

组件化：公共组件是Vue3组件化思想的体现。每个公共组件通常独立于其他组件，有自己的状态和行为。
可定制性：公共组件可以接受props参数来自定义样式和功能，以适应不同的应用场景。
可维护性：公共组件的更改可以通过版本控制进行管理，同时可以编写文档来指导如何使用和维护组件。

创建Vue3公共组件

准备工作：安装Vue3

首先，确保已安装Node.js和npm。接下来，使用Vue CLI来创建一个新的Vue3项目：

npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app
npm install

创建公共组件模板

创建公共组件需要一个模板。在src/components目录下创建一个新文件夹CommonComponents，用于存放所有的公共组件，例如，创建一个Button.vue文件：

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

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

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

使用组件化思想编写公共组件

公共组件需要遵循组件化的原则，实现复用性和易维护性。以下是一个更复杂的公共组件，例如，创建一个带有进度条的按钮组件ProgressBarButton.vue：

<template>
  <div class="progress-bar-button">
    <button @click="handleClick">
      {{ text }}
      <span v-if="showProgress" class="progress">
        <span class="bar" :style="{ width: progress + '%' }"></span>
      </span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click Me',
    },
    progress: {
      type: Number,
      default: 0,
    },
    showProgress: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>

<style scoped>
.progress-bar-button button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #42b883;
  color: white;
  cursor: pointer;
  position: relative;
}

.progress-bar-button .progress {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.progress-bar-button .bar {
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
}
</style>

引入和使用公共组件

在Vue3项目中引入组件

在需要使用公共组件的父组件中，首先通过import语句导入组件，然后在模板中使用它。

<template>
  <div>
    <CommonComponentsButton :text="buttonText" @click="handleButtonClicked" />
    <ProgressBarButton :text="buttonText" :progress="progress" :showProgress="showProgress" />
  </div>
</template>

<script>
import CommonComponentsButton from '../components/CommonComponents/Button.vue';
import ProgressBarButton from '../components/CommonComponents/ProgressBarButton.vue';

export default {
  components: {
    CommonComponentsButton,
    ProgressBarButton,
  },
  data() {
    return {
      buttonText: 'Click Me',
      progress: 0,
      showProgress: false,
    };
  },
  methods: {
    handleButtonClicked() {
      this.progress += 20;
      if (this.progress >= 100) {
        this.progress = 0;
        this.showProgress = false;
      } else {
        this.showProgress = true;
      }
    },
  },
};
</script>

在不同页面中使用公共组件

公共组件可以被多个页面复用。只需要在每个页面的组件文件中导入并使用它们即可。

例如，假设需要在Home.vue和About.vue两个页面中使用公共组件：

<!-- Home.vue -->
<template>
  <div>
    <h1>Welcome to Home Page</h1>
    <CommonComponentsButton :text="buttonText" @click="handleButtonClicked" />
  </div>
</template>

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

export default {
  components: {
    CommonComponentsButton,
  },
  data() {
    return {
      buttonText: 'Home Button',
    };
  },
  methods: {
    handleButtonClicked() {
      alert('Home Button Clicked');
    },
  },
};
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>Welcome to About Page</h1>
    <ProgressBarButton :text="buttonText" :progress="progress" :showProgress="showProgress" />
  </div>
</template>

<script>
import ProgressBarButton from '../components/CommonComponents/ProgressBarButton.vue';

export default {
  components: {
    ProgressBarButton,
  },
  data() {
    return {
      buttonText: 'About Button',
      progress: 0,
      showProgress: false,
    };
  },
  methods: {
    handleButtonClicked() {
      this.progress += 10;
      if (this.progress >= 100) {
        this.progress = 0;
        this.showProgress = false;
      } else {
        this.showProgress = true;
      }
    },
  },
};
</script>

调整公共组件的样式和属性

公共组件可以通过props参数来自定义样式和功能。例如，Button.vue组件可以通过text和color属性来改变按钮的文本和颜色：

<template>
  <button @click="handleClick" :style="{ color: buttonColor }">
    {{ text }}
  </button>
</template>

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

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

在父组件中，可以这样使用：

```vue
<template>
  <div>
    <CommonComponentsButton :text="buttonText" :buttonColor="buttonColor" @click="handleButtonClicked" />
  </div>
</template>

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

export default {
  components: {
    CommonComponentsButton,
  },
  data() {
    return {
      buttonText: 'Click Me',
      buttonColor: 'red',
    };
  },
  methods: {
    handleButtonClicked() {
      alert('Button Clicked');
    },
  },
};
</script>
``

## 组件通信与事件绑定

### 父子组件通信

在父子组件通信中，父组件可以通过props将数据传递给子组件，并通过`v-model`或事件监听来接收子组件的事件。

例如，假设有一个父组件`ParentComponent.vue`和一个子组件`ChildComponent.vue`：

```vue
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
  methods: {
    handleChildEvent(childMessage) {
      console.log('Child Message:', childMessage);
    },
  },
};
</script>
``

```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
    <button @click="emitChildEvent">Emit Child Event</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello from Child',
    },
  },
  methods: {
    emitChildEvent() {
      this.$emit('child-event', 'Hello from Child');
    },
  },
};
</script>
``

### 兄弟组件通信

对于兄弟组件之间的通信，可以使用一个中间组件（通常是父组件）来传递信息。或者，可以使用Vue3的`provide`和`inject`功能来实现组件间通信。

例如，假设有一个父组件`ParentComponent.vue`，它有两个子组件`SiblingComponent1.vue`和`SiblingComponent2.vue`：

```vue
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <SiblingComponent1 :message="message" @sibling-event="handleSiblingEvent" />
    <SiblingComponent2 @sibling-event="handleSiblingEvent" />
  </div>
</template>

<script>
import SiblingComponent1 from '../components/SiblingComponent1.vue';
import SiblingComponent2 from '../components/SiblingComponent2.vue';

export default {
  components: {
    SiblingComponent1,
    SiblingComponent2,
  },
  data() {
    return {
      message: 'Hello from Parent',
    };
  },
  methods: {
    handleSiblingEvent(siblingMessage) {
      console.log('Sibling Message:', siblingMessage);
    },
  },
};
</script>
``

```vue
<!-- SiblingComponent1.vue -->
<template>
  <div>
    <h2>Sibling Component 1</h2>
    <p>{{ message }}</p>
    <button @click="emitSiblingEvent">Emit Sibling Event</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello from Sibling 1',
    },
  },
  methods: {
    emitSiblingEvent() {
      this.$emit('sibling-event', 'Hello from Sibling 1');
    },
  },
};
</script>
``

```vue
<!-- SiblingComponent2.vue -->
<template>
  <div>
    <h2>Sibling Component 2</h2>
    <button @click="emitSiblingEvent">Emit Sibling Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitSiblingEvent() {
      this.$emit('sibling-event', 'Hello from Sibling 2');
    },
  },
};
</script>
``

### 组件内部事件绑定

在组件内部，可以通过`v-on`指令或`@`语法来绑定事件。例如：

```vue
<template>
  <div>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

此外，还可以使用`.native`修饰符来绑定原生事件。例如，绑定`<div>`元素的`click`事件：

```vue
<template>
  <div @click="handleClick">
    Click the div
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Div Clicked');
    },
  },
};
</script>

管理和维护公共组件

如何测试公共组件

测试公共组件可以确保其在各种情况下都能正常工作，可以在单元测试、集成测试和端到端测试中进行测试。

例如，使用vue-test-utils和jest进行单元测试：

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

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

组件优化与性能提升

避免不必要的渲染：使用v-if、v-show等来控制元素的渲染。
减少DOM操作：尽量减少对DOM的操作，使用虚拟DOM来优化渲染性能。
懒加载：对于不常用的公共组件，可以使用懒加载来提高应用启动速度。
代码分割：使用Webpack等工具进行代码分割，以减少每次加载的代码量。

例如，使用vue-router进行懒加载：

const ButtonComponent = () => import('../components/CommonComponents/Button.vue');
const ProgressBarButtonComponent = () => import('../components/CommonComponents/ProgressBarButton.vue');

export default [
  {
    path: '/button',
    name: 'ButtonComponent',
    component: ButtonComponent,
  },
  {
    path: '/progress-bar-button',
    name: 'ProgressBarButtonComponent',
    component: ProgressBarButtonComponent,
  },
];

版本控制与文档编写

版本控制：使用Git等版本控制系统来管理公共组件的版本。
文档编写：编写清晰的文档来说明公共组件的使用方法和注意事项。
自动化测试：编写自动化测试用例来确保公共组件的稳定性。

例如，使用GitHub来管理代码版本：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/yourrepo.git
git push -u origin master

编写清晰的文档，例如，创建一个README.md文件：

# Common Components

This repository contains commonly used Vue3 components.

## Installation

```bash
npm install @yourusername/common-components

Usage

<template>
  <div>
    <CommonComponentsButton :text="buttonText" @click="handleButtonClicked" />
  </div>
</template>

<script>
import CommonComponentsButton from '@yourusername/common-components/Button.vue';

export default {
  components: {
    CommonComponentsButton,
  },
  data() {
    return {
      buttonText: 'Click Me',
    };
  },
  methods: {
    handleButtonClicked() {
      console.log('Button clicked');
    },
  },
};
</script>

Testing

npm run test


## 实际案例：构建一个公共按钮组件

### 分析需求

假设需要构建一个公共按钮组件，这个按钮组件需要支持以下功能：

1. **基本样式**：按钮具有基本的样式，如背景颜色、文字颜色、边框等。
2. **自定义文本**：可以通过`text`属性自定义按钮的文本。
3. **点击事件**：可以监听按钮的点击事件。
4. **禁用状态**：可以通过`disabled`属性控制按钮是否可点击。
5. **加载状态**：可以通过`loading`属性显示加载进度。

### 编写代码实现

根据需求，可以创建一个名为`CommonButton.vue`的公共按钮组件：

```vue
<template>
  <button
    :disabled="disabled"
    :class="buttonClass"
    @click="handleClick"
  >
    <span v-if="loading" class="spinner"></span>
    <span v-else>{{ text }}</span>
  </button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Click Me',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    buttonClass() {
      return {
        'common-button': true,
        'common-button--disabled': this.disabled,
        'common-button--loading': this.loading,
      };
    },
  },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.$emit('click');
      }
    },
  },
};
</script>

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

.common-button--disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.common-button--loading {
  position: relative;
}

.common-button--loading .spinner {
  position: absolute;
  width: 1em;
  height: 1em;
  border: 4px solid #42b883;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

调试与上线

在调试过程中，可以根据需要调整样式和行为，并使用单元测试来确保组件的正确性。

例如，编写一个单元测试文件来测试CommonButton.vue组件：

// CommonButton.spec.js
import { mount } from '@vue/test-utils';
import CommonButton from '../components/CommonComponents/CommonButton.vue';

describe('CommonButton.vue', () => {
  it('emits "click" event when clicked', () => {
    const wrapper = mount(CommonButton);
    wrapper.find('button').trigger('click');
    expect(wrapper.emitted().click).toBeTruthy();
  });

  it('disables the button when disabled prop is true', () => {
    const wrapper = mount(CommonButton, {
      propsData: {
        disabled: true,
      },
    });
    expect(wrapper.find('button').element.disabled).toBe(true);
  });

  it('displays loading spinner when loading prop is true', () => {
    const wrapper = mount(CommonButton, {
      propsData: {
        loading: true,
      },
    });
    expect(wrapper.find('.spinner').exists()).toBe(true);
  });
});

一旦调试完成，可以将组件发布到npm并供其他项目使用：

npm publish

使用该组件的项目可以通过npm install来安装：

npm install @yourusername/common-components

并将其引入到需要使用的页面中：


<template>
  <div>
    <CommonButton :text="buttonText" @click="handleButtonClicked" />
  </div>
</template>

<script>
import CommonButton from '@yourusername/common-components/CommonButton.vue';

export default {
  components: {
    CommonButton,
  },
  data() {
    return {
      buttonText: 'Click Me',
    };
  },
  methods: {
    handleButtonClicked() {
      console.log('Button clicked');
    },
  },
};
</script>
``

通过以上步骤，你可以构建一个功能强大的公共按钮组件，并将其用于不同的Vue3项目中。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕妹3242003

手记
篇

粉丝

9

获赞与收藏

25

关注作者，订阅最新文章

相关文章推荐

JavaScript：从新手到忍者修炼入门指南

最新 Webpack4 从零入门教程（共 18 章）

【笔记】MindManager 2018新手入门教程

Maven入门指南

Orange Pi 新手起步指南

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空