vue公共组件的实现
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)
