Vue 3 Web Component无法传递对象类型Prop问题求助

针对你遇到的对象类型 Prop extraSettings 始终为 undefined 的问题，分场景给出规范解决方案：

场景1：原生HTML环境使用自定义元素 #

原生HTML的属性仅支持字符串类型，无法直接传递对象。Vue自定义元素会将DOM属性（而非HTML属性）映射为组件Prop，因此需要通过JavaScript直接设置元素的DOM属性：

<my-label id="my-label" text="test" count="5"></my-label>

<script>
  // 获取元素引用（避免全局querySelector，推荐用ID或ref）
  const myLabel = document.getElementById('my-label');
  // 直接赋值DOM属性
  myLabel.extraSettings = { name: 'john' };
</script>

场景2：Vue应用内部使用自定义元素 #

如果是在Vue项目中使用这个Web Component，可以利用Vue的v-bind配合.prop修饰符，让Vue直接将值作为DOM属性传递给自定义元素：

<template>
  <my-label 
    text="test" 
    :count="5" 
    :extra-settings.prop="{ name: 'john' }"
  ></my-label>
</template>

为什么之前的尝试失败？ #

• 原生HTML中写.extra-settings="{ name: 'john' }"：这是Vue模板的语法，原生浏览器不识别，会把它当成普通HTML属性，值是字符串"{ name: 'john' }"，无法解析为对象。
• 使用:extra-settings.prop：同样是Vue模板专属语法，仅在Vue编译模板时生效，原生HTML环境不支持。
• 直接写extra-settings="{ name: 'john' }"：浏览器会把它作为HTML属性，值为字符串，而该字符串不是标准JSON（键未用双引号），Vue无法将其转换为对象，最终Prop为undefined。

可选优化：支持JSON字符串传递对象 #

如果希望通过HTML属性传递对象，可以在组件中添加解析逻辑，支持JSON字符串转对象：

修改组件的Prop定义：

import { type Ref, ref, type PropType } from "vue";

export default {
  props: {
    text: String,
    count: {
      default: 0,
      type: Number
    },
    extraSettings: {
      type: Object as PropType<{ name: string }>,
      default: () => ({}),
      validator(value: any) {
        // 允许JSON字符串或对象
        if (typeof value === 'string') {
          try {
            JSON.parse(value);
            return true;
          } catch (e) {
            console.error('extraSettings 必须是有效的JSON字符串');
            return false;
          }
        }
        return typeof value === 'object';
      }
    }
  },
  setup(props) {
    // 解析JSON字符串为对象
    const parsedExtraSettings = ref(
      typeof props.extraSettings === 'string' 
        ? JSON.parse(props.extraSettings) 
        : props.extraSettings
    );

    let count: Ref<number> = ref(props.count);

    const increaseCount = () => {
      count.value++;
    };

    return {
      count,
      text: props.text,
      increaseCount,
      extraSettings: parsedExtraSettings
    };
  },
  mounted() {
    console.log(this.count);
    console.log(this.extraSettings);
  }
};

然后在原生HTML中可以这样使用（注意JSON字符串的键必须用双引号）：

<my-label 
  text="test" 
  count="5" 
  extra-settings='{"name": "john"}'
></my-label>

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