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

Vue3公共组件教程：入门与实践指南

标签：

前端工具 Vue.js

本文介绍了如何创建和使用Vue3公共组件，包括公共组件的特点、创建步骤、复用方法以及组件间的通信方式。文章详细讲解了公共组件的编写规范、导入和使用过程，以及如何对公共组件进行测试。通过这些内容，读者可以全面了解和掌握Vue3公共组件的创建与使用。

Vue3公共组件简介

什么是公共组件

公共组件是可以在多个Vue项目中复用的组件。这些组件通常封装了一些通用的功能，如导航栏、侧边栏、按钮等。使用公共组件可以减少代码重复，提高开发效率，同时也能确保组件的一致性和可维护性。

为什么要使用公共组件

减少代码重复：通过公共组件，开发者可以避免在不同项目中重复编写相同的代码。
提高开发效率：公共组件可以作为一个独立的模块，直接在其他项目中导入使用，节省了开发时间。
保证一致性：公共组件确保了不同项目中使用的组件具有相同的外观和行为，增加了项目的可维护性。
易于维护：公共组件的更改可以在一个地方完成，所有使用该组件的项目都会自动更新。

Vue3中公共组件的特点

在Vue3中，公共组件具有以下特点：

组合式API：Vue3引入了组合式API，使得公共组件的编写更加灵活和模块化。
动态组件：公共组件可以作为动态组件使用，根据不同的条件渲染不同的组件。
插槽（Slots）：插槽使得公共组件可以被定制，以适应不同的使用场景。
自定义事件：公共组件可以通过自定义事件与父组件进行通信。
Props：公共组件可以通过Props接收父组件传递的数据和属性。

创建Vue3公共组件

准备工作：安装Vue CLI

使用Vue CLI可以快速搭建Vue项目，这里以Vue CLI 5为例，安装步骤如下：

确保已安装Node.js和npm。
全局安装Vue CLI：
```
npm install -g @vue/cli
```
创建Vue项目：
```
vue create my-vue3-project
```

创建公共组件：示例组件（如按钮组件）

为了创建一个公共按钮组件，我们首先需要一个Vue项目作为基础。以下为创建和使用公共按钮组件的步骤：

创建Vue项目：
```
vue create my-vue3-project
```
进入项目目录：
```
cd my-vue3-project
```

创建一个公共组件目录和文件：

mkdir src/components/common
touch src/components/common/Button.vue

编辑Button.vue文件，定义一个公共按钮组件：

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

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

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}
</style>

如何在不同项目中复用组件

将创建好的公共组件库发布到npm或其他包管理仓库，以便其他项目可以引用。步骤如下：

安装npm包：

npm install --save @my-org/my-vue3-components

在需要使用的项目中，导入并使用公共组件：

<template>
  <div>
    <common-button text="点击我" button-class="primary" @click="handleClick"></common-button>
  </div>
</template>

<script>
import CommonButton from '@my-org/my-vue3-components'

export default {
  components: {
    CommonButton
  },
  methods: {
    handleClick(event) {
      console.log('按钮被点击了：', event)
    }
  }
}
</script>

使用Vue3公共组件

导入公共组件

在项目中使用公共组件之前，需要先导入组件。以下是一个示例，展示了如何在Vue项目中导入公共按钮组件：

<script>
import CommonButton from '@my-org/my-vue3-components'

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

在Vue3项目中使用组件

在模板中使用导入的组件：

<template>
  <div>
    <common-button text="点击我" button-class="primary"></common-button>
  </div>
</template>

自定义公共组件的属性和事件

公共组件可以定义Props和自定义事件，以便在使用时可以对其进行定制。以下是一个更复杂的公共按钮组件示例：

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

<script>
export default {
  name: 'Button',
  props: {
    text: {
      type: String,
      default: '按钮'
    },
    buttonClass: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(event) {
      if (!this.disabled) {
        this.$emit('click', event)
      }
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

.disabled {
  background-color: #ced4da;
  color: #6c757d;
}
</style>

使用该组件时，可以指定Props和自定义事件：

<template>
  <div>
    <common-button text="点击我" button-class="primary" :disabled="isDisabled" @click="handleClick"></common-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDisabled: false
    }
  },
  methods: {
    handleClick(event) {
      console.log('按钮被点击了：', event)
    }
  }
}
</script>

创建其他类型的公共组件

除了按钮组件，公共组件还可以是导航栏或侧边栏等。以下是一个公共导航栏组件的示例：

<template>
  <nav>
    <ul>
      <li v-for="item in navItems" :key="item.id">
        <router-link :to="item.route">{{ item.title }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    navItems: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}
</style>

导入并使用该组件：

<template>
  <div>
    <common-navbar :nav-items="[{ id: 1, title: '首页', route: '/' }, { id: 2, title: '关于', route: '/about' }]" />
  </div>
</template>

<script>
import CommonNavbar from '@my-org/my-vue3-components'

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

组件间的通信

父组件与子组件通信

父组件可以通过Props向子组件传递数据，子组件可以通过事件向父组件传递数据。以下是一个示例，展示了父组件如何向子组件传递数据，以及子组件如何触发事件返回数据给父组件。

父组件：

<template>
  <div>
    <child-component :message="parentMessage" @send-message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是父组件的数据'
    }
  },
  methods: {
    handleMessage(message) {
      console.log('子组件发送了消息：', message)
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ message }}
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  },
  methods: {
    sendMessage() {
      this.$emit('send-message', '这是子组件的数据')
    }
  }
}
</script>

兄弟组件通信

兄弟组件之间的通信可以通过一个共享的Vue实例进行。以下是一个示例，展示了如何使用共享Vue实例实现兄弟组件之间的通信：

父组件：

<template>
  <div>
    <child-component-a @send-message="handleMessage"></child-component-a>
    <child-component-b @send-message="handleMessage"></child-component-b>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue'
import ChildComponentB from './ChildComponentB.vue'

export default {
  components: {
    ChildComponentA,
    ChildComponentB
  },
  methods: {
    handleMessage(message) {
      console.log('组件发送了消息：', message)
    }
  }
}
</script>

Vuex和Event Bus的使用

Vuex可以用来集中管理和存储应用程序的状态，Event Bus可以用来实现组件之间的通信。以下是一个使用Event Bus的示例：

main.js：

import Vue from 'vue'
import eventBus from './eventBus'

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>',
  eventBus
})

ChildComponentA.vue：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponentA',
  methods: {
    sendMessage() {
      this.$eventBus.$emit('message-sent', '这是从ChildComponentA发送的消息')
    }
  }
}
</script>

ChildComponentB.vue：

<template>
  <div>
    <button @click="listenForMessage">监听消息</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponentB',
  created() {
    this.$eventBus.$on('message-sent', this.handleMessage)
  },
  methods: {
    handleMessage(message) {
      console.log('收到了消息：', message)
    }
  }
}
</script>

组件样式与作用域

组件内样式作用域

Vue组件的样式默认具有作用域，仅作用于组件本身。使用内联样式或scoped属性可以限制样式的作用域。

<template>
  <div class="my-component">
    <p>这是一个带有作用域样式的组件</p>
  </div>
</template>

<style scoped>
.my-component {
  color: red;
}
</style>

外部样式引入与管理

将外部样式引入组件中时，可以使用全局样式或局部样式。

全局样式：

<style>
/* 这是一个全局样式 */
.my-component {
  color: blue;
}
</style>

局部样式：

<style scoped>
/* 这是一个局部样式 */
.my-component {
  color: green;
}
</style>

局部和全局样式的选择

选择全局样式还是局部样式取决于具体需求。如果样式会影响到整个应用，则选择全局样式；如果样式仅影响到组件本身，则选择局部样式。

测试Vue3公共组件

为什么需要测试公共组件

测试公共组件可以帮助确保组件的正确性和稳定性。测试可以包括单元测试、集成测试和端到端测试。

测试公共组件的方法（如单元测试）

单元测试是测试公共组件最常见的方式，主要测试组件的逻辑和行为。以下是一个使用Jest和Vue Test Utils进行单元测试的示例：

Button.spec.js：

import { mount } from '@vue/test-utils'
import Button from '@/components/common/Button.vue'

describe('Button.vue', () => {
  it('emits click event on click', async () => {
    const wrapper = mount(Button)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })

  it('displays correct text', () => {
    const wrapper = mount(Button, { props: { text: '自定义文本' } })
    expect(wrapper.text()).toBe('自定义文本')
  })
})

使用Jest和Vue Test Utils进行组件测试

Jest是一个流行的JavaScript测试框架，Vue Test Utils是Vue的官方测试工具。以下是一个完整的测试示例，展示了如何设置测试环境和运行测试：

npm install --save-dev jest @vue/test-utils

Button.spec.js：

import { mount } from '@vue/test-utils'
import Button from '@/components/common/Button.vue'

describe('Button.vue', () => {
  it('emits click event on click', async () => {
    const wrapper = mount(Button)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('click')).toBeTruthy()
  })

  it('displays correct text', () => {
    const wrapper = mount(Button, { props: { text: '自定义文本' } })
    expect(wrapper.text()).toBe('自定义文本')
  })

  it('renders with correct disabled state', () => {
    const wrapper = mount(Button, { props: { disabled: true } })
    expect(wrapper.element.disabled).toBe(true)
  })
})

测试公共组件的Props和事件

测试公共组件的Props和事件可以确保组件的输入输出行为符合预期。以下是一个测试Props和事件的示例：

Button.spec.js：


import { mount } from '@vue/test-utils'
import Button from '@/components/common/Button.vue'

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

  it('renders with correct text', () => {
    const wrapper = mount(Button, { props: { text: '自定义文本' } })
    expect(wrapper.text()).toBe('自定义文本')
  })

  it('applies buttonClass prop', () => {
    const wrapper = mount(Button, { props: { buttonClass: 'primary' } })
    expect(wrapper.classes()).toContain('primary')
  })
})
``

通过这些测试，可以确保公共组件在各种使用场景下都能正常工作。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

qq_遁去的一_1

手记
篇

粉丝

7

获赞与收藏

23

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3公共组件教程：入门与实践指南

什么是公共组件

为什么要使用公共组件

Vue3中公共组件的特点

准备工作：安装Vue CLI

创建公共组件：示例组件（如按钮组件）

如何在不同项目中复用组件

导入公共组件

在Vue3项目中使用组件

自定义公共组件的属性和事件

创建其他类型的公共组件

父组件与子组件通信

兄弟组件通信

Vuex和Event Bus的使用

组件内样式作用域

外部样式引入与管理

局部和全局样式的选择

为什么需要测试公共组件

测试公共组件的方法（如单元测试）

使用Jest和Vue Test Utils进行组件测试

测试公共组件的Props和事件

阅读免费教程