当前位置：首页 > VUE

vue公共组件的实现

2026-02-24 09:34:30VUE

Vue 公共组件的实现方法

创建公共组件

在 src/components 目录下创建公共组件文件，例如 Button.vue。组件内容遵循 Vue 单文件组件规范，包含 <template>、<script> 和 <style> 三部分。

<template>
  <button class="custom-button" @click="$emit('click')">
    <slot></slot>
  </button>
</template>

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

<style scoped>
.custom-button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

全局注册公共组件

在 src/main.js 或单独模块中全局注册组件，避免重复导入。

import Vue from 'vue'
import CustomButton from '@/components/Button.vue'

Vue.component('CustomButton', CustomButton)

局部注册组件

若需局部使用，在目标组件中直接导入。

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

export default {
  components: {
    CustomButton
  }
}

使用 Props 传递数据

通过 props 实现组件数据动态化，增强复用性。

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    disabled: Boolean
  }
}
</script>

插槽 (Slot) 功能

利用插槽支持内容分发，适应不同场景。

<template>
  <div class="modal">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

组件通信

通过 $emit 触发自定义事件实现子父通信。

methods: {
  handleClick() {
    this.$emit('button-click', payload)
  }
}

样式隔离

使用 scoped 属性或 CSS Modules 避免样式污染。

<style module>
.button {
  color: red;
}
</style>

最佳实践

组件命名采用 PascalCase 规范
复杂组件提供文档说明
为 props 添加类型检查和默认值
优先使用组合式 API (Vue 3)

vue公共组件的实现

标签: 组件 vue

分享给朋友：

vue实现打字机

Vue实现打字机效果在Vue中实现打字机效果可以通过动态更新文本内容并添加延迟来实现。以下是几种常见的实现方法：使用setInterval实现 <template> <di…

vue实现打印二维码

安装二维码生成库使用 qrcode 或 vue-qrcode 库生成二维码。通过 npm 安装： npm install qrcode vue-qrcode 生成二维码在 Vue 组…

eventbus vue实现

EventBus 实现原理 EventBus 是一种发布/订阅模式，用于 Vue 组件间的通信。核心是通过一个中央事件总线管理事件监听和触发。创建 EventBus 在 Vue 项目中创建一个独…

vue实现注销

实现用户注销功能在Vue应用中实现用户注销功能通常涉及清除用户会话、重置应用状态并跳转到登录页面。以下是具体实现方法：清除用户认证信息使用Vuex或Pinia管理用户状态时，需在注销时重置存…

vue实现mui

使用 Vue 实现 MUI（Material-UI）风格的界面 Vue 本身不直接提供 MUI（Material Design）组件，但可以通过集成第三方库或手动实现来达到类似效果。以下是几种常见方法…

vue实现白板

Vue实现白板功能使用Vue实现白板功能可以通过HTML5的Canvas API结合Vue的响应式特性来完成。以下是实现白板功能的关键步骤：安装依赖在Vue项目中安装必要的依赖，如vue-d…

vue公共组件的实现