颜色选择器组件通过 emit 向父组件回传标准化的十六进制色值，核心是在子组件中监听颜色变化事件、统一转换为 #RRGGBB 格式后再触发自定义事件 color-selected，父组件通过 @color-selected 监听并直接使用该 HEX 值。
颜色选择器组件通过 emit 向父组件回传十六进制色值，核心在于：子组件内部完成颜色格式标准化（确保是 #RRGGBB 或 #RRGGBBAA），再用 emit 触发自定义事件把值抛出去；父组件监听该事件，拿到的就是可直接使用的 HEX 值。
子组件内统一转为 HEX 再 emit
不能依赖 color-format="hex" 一劳永逸——尤其在使用 active-change、change 等事件时，Element UI 仍可能返回 rgb(…) 或 rgba(…)。稳妥做法是在子组件中主动转换：
- 监听颜色变化事件（如
@change或@active-change） - 接收原始值（可能是字符串
"rgb(255, 100, 50)"，也可能是对象{ hex: "#ff6432", rgba: "rgba(255,100,50,1)" }，取决于你用的是 Element UI 还是 vue-color） - 调用转换函数（可用正则提取 RGB 分量后转 HEX，或直接取
val.hex） - 执行
this.$emit('color-selected', finalHex)（Vue 2）或emit('color-selected', finalHex)（Vue 3）
Vue 2 示例：基于 Element UI 的子组件
假设子组件封装了 <el-color-picker>：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
<template>
<el-color-picker
v-model="localColor"
@change="handleColorChange"
color-format="rgb"
/>
</template>
<script>
export default {
props: ['value'], // 接收父组件初始值
data() {
return { localColor: this.value || '#409EFF' }
},
methods: {
handleColorChange(val) {
// val 可能是 rgb(…) 字符串，需转 HEX
const hex = this.rgbToHex(val) || val
this.$emit('color-selected', hex) // 关键：emit 自定义事件
this.$emit('input', hex) // 兼容 v-model
},
rgbToHex(str) {
const rgbMatch = str.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
if (rgbMatch) {
const [_, r, g, b] = rgbMatch
return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`
}
return null
}
}
}
</script>
Vue 3 + vue-color 示例：直接取 hex 属性
若用 vue-color 的 Sketch 组件，其 @input 回调参数是对象，含 .hex 字段：
立即学习“前端免费学习笔记（深入）”；
- 子组件中：
@input="val => $emit('color-selected', val.hex)" - 父组件绑定：
<color-picker @color-selected="onColorPicked"></color-picker> - 父组件方法：
onColorPicked(hex) { console.log('拾取到 HEX：', hex) }
父组件正确监听并响应
父组件不关心子组件内部怎么实现，只认事件名和传参结构：
- 用
@color-selected="handlePick"显式监听（事件名需与子组件emit一致） - 避免混淆
v-model和自定义事件：如果子组件同时支持v-model，它应触发update:modelValue；而颜色拾取逻辑建议走独立事件（如color-selected），语义更清晰 - 收到 HEX 值后，可直接用于样式绑定、存入表单、提交 API 等，无需再做格式判断
