Angular与Vue2通过Web Component数据传递失败问题求助

核心原因 #

硬编码传值有效但动态绑定失效，本质是Angular绑定方式与Vue Custom Element的属性监听机制不匹配：Vue自定义元素默认监听DOM属性变化，而你使用的[attr.test]或插值表达式仅操作HTML属性，无法触发Vue的prop更新；同时Vue端存在多余的根实例挂载，可能干扰自定义元素的属性映射。

解决方案步骤 #

1. 修正Vue端自定义元素配置 #

移除多余的Vue根实例代码（仅需生成Web Component，无需在Vue项目内挂载组件），并显式配置属性监听规则：

import Vue from 'vue';
import App from './App.vue';
import vueCustomElement from 'vue-custom-element';

Vue.use(vueCustomElement);
// 配置自定义元素，指定props并开启HTML属性监听（可选）
Vue.customElement('my-vue-component', App, {
  props: ['test'],
  attributes: ['test'], // 显式监听HTML属性变化，兼容多种绑定方式
  shadowDOM: false // 关闭Shadow DOM，避免属性传递被隔离（按需开启）
});

Vue.config.productionTip = false;

// 移除以下冗余代码，不需要在Vue项目内挂载根组件
// new Vue({
//   render: h => h(App),
// }).$mount('#app');

2. 调整Angular端绑定方式 #

使用DOM属性绑定而非HTML属性绑定，直接传递动态值：

<section class="vue-dialog">
  <ng-container *ngIf="toVue">
    <!-- 直接绑定DOM属性，而非HTML属性 -->
    <my-vue-component [test]="toVue.value"></my-vue-component>
  </ng-container>
</section>

如果需要兼容HTML属性绑定（比如旧代码依赖），可保留[attr.test]，但必须确保Vue端配置了attributes: ['test']。

3. 验证Vue组件的prop接收 #

确保App.vue的props定义和渲染逻辑正确：

<script>
export default {
  props: {
    test: String // 明确指定类型，避免类型不匹配导致的undefined
  },
  mounted() {
    console.log('check vue test', this.test)
  }
};
</script>

关键说明 #

• 硬编码有效是因为HTML属性会被Vue Custom Element自动转换为对应prop，但动态值变化时，HTML属性无法触发Vue的prop更新逻辑；
• Angular的[attr.test]仅修改HTML属性，而Vue自定义元素默认监听DOM属性变化，因此必须用[test]绑定DOM属性；
• 开启attributes: ['test']后，Vue会同时监听HTML属性和DOM属性的变化，进一步提升兼容性。

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