颜色选择器组件通过 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></el-color-picker>：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

<template><el-color-picker v-model="localColor" color-format="rgb"></el-color-picker></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-picker>
• 父组件方法：onColorPicked(hex) { console.log('拾取到 HEX：', hex) }

父组件正确监听并响应

父组件不关心子组件内部怎么实现，只认事件名和传参结构：

• 用 @color-selected="handlePick" 显式监听（事件名需与子组件 emit 一致）
• 避免混淆 v-model 和自定义事件：如果子组件同时支持 v-model，它应触发 update:modelValue；而颜色拾取逻辑建议走独立事件（如 color-selected），语义更清晰
• 收到 HEX 值后，可直接用于样式绑定、存入表单、提交 API 等，无需再做格式判断

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！