Vue2.x自定义元素传参末尾点号丢失：是否为已知问题及修复方案

问题说明 #

在Vue2.x环境下使用Vue Custom Element时，传递如"111."这类末尾带点号的字符串参数，点号会被自动移除。具体表现：

• 操作流程：
  • 执行npm run build编译Vue项目
  • 在PHP项目中引入/dist目录下的编译产物
• 实际渲染结果：组件显示Hello from MyComponent! -> 111，末尾点号丢失
• 预期结果：完整显示Hello from MyComponent! -> 111.

相关代码示例 #

index.php文件 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <my-component test-value="111."></my-component>
<script src="vue-old/dist/main.js"></script>
</body>
</html>

MyComponent.vue #

<template>
  <div class="my-component">
    <h1>Hello from MyComponent! -> {{ testValue }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    testValue: {
      type: String,
      default: 'default message'
    }
  }
}
</script>

<style scoped>
.my-component {
  color: blue;
}
</style>

构建入口main.js #

import Vue from 'vue'
import VueCustomElement from 'vue-custom-element'
import MyComponent from './src/MyComponent.vue'
Vue.use(VueCustomElement)
Vue.customElement('my-component', MyComponent)

Vue.component('v-style', {
  render: function (createElement) {
    return createElement('style', this.$slots.default)
  }
})

问题根源与修复方案 #

这是Vue Custom Element的已知问题，核心原因是其内部属性解析逻辑会自动尝试将看起来像数字的属性值转换为数值类型——"111."会被识别为数字格式并转换为111，后续转回字符串时末尾点号就丢失了。

以下是三种可行的修复方式：

方式1：注册组件时强制指定属性类型（推荐） #

在注册自定义元素时，显式声明属性的类型为字符串，跳过自动类型转换：

Vue.customElement('my-component', MyComponent, {
  props: {
    testValue: {
      type: String
    }
  }
})

方式2：组件内部手动修正属性值 #

如果无法修改组件注册逻辑，可以在组件的created钩子中直接从DOM元素获取原始属性值，覆盖被转换后的结果：

export default {
  name: 'MyComponent',
  props: {
    testValue: {
      type: String,
      default: 'default message'
    }
  },
  created() {
    const rawAttrValue = this.$el.getAttribute('test-value')
    if (rawAttrValue && rawAttrValue !== this.testValue) {
      this.testValue = rawAttrValue
    }
  }
}

方式3：改用数据属性传递参数 #

将属性改为数据属性格式传递，再在组件内部通过dataset获取原始值：

<!-- index.php中修改属性写法 -->
<my-component data-test-value="111."></my-component>

// MyComponent.vue中修改取值逻辑
export default {
  name: 'MyComponent',
  data() {
    return {
      testValue: this.$el.dataset.testValue || 'default message'
    }
  }
}

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