Vue 3/自定义元素中如何实现Attribute到Property的转换？

Vue3 提供了两种核心方式来处理自定义元素中非原始类型属性的转换，完全匹配你需要的数组类型options场景：

1. 定义自定义元素时配置属性转换器 #

当使用Vue3的defineCustomElement创建自定义元素时，可在props选项中为特定属性指定converter函数，实现字符串到目标类型（如数组）的转换，同时保证底层Property始终为数组类型。

示例代码：

import { defineCustomElement } from 'vue'

const MyDropDown = defineCustomElement({
  props: {
    options: {
      type: Array,
      // 自定义转换器：兼容JSON字符串、逗号分隔字符串和原生数组
      converter(value) {
        if (typeof value === 'string') {
          // 优先尝试解析JSON格式
          try {
            const parsed = JSON.parse(value)
            if (Array.isArray(parsed)) return parsed
          } catch (e) {
            // JSON解析失败则按逗号分割处理
            return value.split(',').map(item => item.trim())
          }
        }
        // 确保返回值始终是数组
        return Array.isArray(value) ? value : []
      },
      default: () => []
    }
  },
  template: `
    <select>
      <option v-for="opt in options" :key="opt">{{ opt }}</option>
    </select>
  `
})

// 注册自定义元素到浏览器
customElements.define('my-drop-down', MyDropDown)

实现效果：

• 纯HTML中使用<my-drop-down options='["foo", "faa", "bar"]'>：转换器自动解析JSON字符串为数组
• 纯HTML中使用<my-drop-down options="foo,faa,bar">：转换器按逗号分割转为数组
• JS直接赋值：document.getElementsByTagName("my-drop-down")[0].options = ["foo", "faa", "bar"]，转换器直接保留数组类型
• Vue项目中使用<MyDropDown :options='["foo", "faa", "bar"]'>：Vue自动传递数组，转换器直接返回

2. 全局配置自定义元素属性转换规则 #

如果多个组件需要类似转换逻辑，可通过Vue全局配置统一处理：

import { createApp } from 'vue'

const app = createApp(App)

// 全局自定义元素属性转换规则
app.config.customElements.transform = (tag, props) => {
  if (tag === 'my-drop-down' && props.options) {
    const value = props.options
    if (typeof value === 'string') {
      try {
        const parsed = JSON.parse(value)
        props.options = Array.isArray(parsed) ? parsed : value.split(',').map(item => item.trim())
      } catch (e) {
        props.options = value.split(',').map(item => item.trim())
      }
    }
  }
  return props
}

这种方式适合批量管理多个自定义元素的属性转换逻辑，避免重复代码。

关键注意点 #

• 转换器需覆盖所有输入场景，确保返回值始终为目标类型（如数组）
• 配合props的type: Array配置，可强制底层Property的类型一致性
• Vue项目中使用自定义元素时，框架会自动识别，无需额外特殊配置（除了通过defineCustomElement创建的元素需注册到customElements）

内容的提问来源于stack exchange，提问作者Ope