Vue 3.2.9 单文件组件SFC构建WebComponent时setup无法获取props值问题

解决方案 #

• 调整构建命令
  普通库构建目标不会做WebComponent的属性适配，需要切换为Vue CLI专属的WebComponent构建模式，命令参考：

vue-cli-service build --target wc --name xn-button src/components/xn-button.vue

该模式会自动使用defineCustomElement包装组件，完成原生自定义元素的属性、插槽、事件映射。

• 检查自定义元素注册逻辑
  如果是手动在代码中注册自定义元素，必须用defineCustomElement包裹组件后再注册，不能直接传入普通Vue组件：

import { defineCustomElement } from 'vue'
import XnButton from './xn-button.vue'

customElements.define('xn-button', defineCustomElement(XnButton))

• 注意属性命名规范
  HTML原生属性大小写不敏感，若后续使用驼峰命名的Props（如btnVariant），在HTML中使用时需要转换为短横线分隔的小写形式（<xn-button btn-variant="xxx">），本次使用的单单词variant不受影响。
• 临时调试方案
  如果排查后仍未解决，可以通过获取当前自定义元素实例直接读取属性验证：

import { getCurrentInstance } from 'vue'

export default {
  props: {
    variant: {
      default: 'normal',
      type: String
    }
  },
  setup(props) {
    const inst = getCurrentInstance()
    // 读取原生DOM上的属性验证是否传入成功
    console.log(inst?.vnode?.el?.getAttribute('variant'))
  }
}

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