Vue CLI 4.5打包Web组件动态传JS变量为Props不生效如何解决

• 你当前写在HTML标签上的:title="creditModalPluginTitle"是Vue模板专属的编译语法，原生HTML解析器完全不识别这类带冒号的绑定规则，会直接把:title当成普通自定义属性，将值"creditModalPluginTitle"识别为字面字符串，完全不会关联你JS里定义的全局变量creditModalPluginTitle
• 脱离Vue编译环境后，不存在自动将JS变量和DOM属性做响应式绑定的逻辑，你之前的操作相当于把Vue单文件组件的写法直接搬到了无编译能力的原生HTML环境中，自然无法触发组件的prop更新

• 静态传值场景：直接去掉属性前的冒号，使用原生HTML支持的attribute写法传值即可，比如：

  <vue-les-creditreport title="Foo Bar"></vue-les-creditreport>
  

  只要你在Vue CLI打包Web Component的配置中正确声明了title为组件的prop，组件会自动读取对应的attribute值完成初始化
• 动态更新值场景：通过原生DOM API操作attribute触发组件的响应式更新，不要尝试在HTML标签上写变量绑定：

  // 1. 获取自定义元素的DOM实例
  const creditReportEl = document.querySelector('vue-les-creditreport')
  // 2. 调用setAttribute方法更新prop值，Vue打包的Web Component会自动监听attribute变化，同步更新组件内部的prop值
  creditReportEl.setAttribute('title', '动态修改后的新标题')
  

• 非字符串类型prop（对象、数组、布尔值）的传值注意：DOM attribute仅支持存储字符串，这类值无法通过setAttribute传递，需要直接操作DOM实例上暴露的对应属性完成赋值，即可触发组件内部的watch监听逻辑

常见操作误区提醒：
很多从Vue项目转用Web Component的开发者，会下意识把组件模板的绑定语法直接抄到原生HTML里，但这些语法只有在Vue编译阶段会被转成真实的DOM操作，没有编译环节的纯HTML环境里写这类语法是完全不生效的。

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