在 Angular 中使用 Vue 组件 [英] Using Vue Components in Angular

问题描述

我有一个用 Vue 构建的项目，我想在 Angular 应用程序中重用 Vue 应用程序中的组件，这样我就不必从头开始重新构建每个组件.

我在媒体上看到了这个教程:如何在 Angular 应用程序中使用 Vue 2.0 组件，但该教程适用于 AngularJS.

我想知道以前是否有人这样做过，是否值得，以及是否有人知道任何教程或参考资料.

解决方案

将您的 Vue 组件包装为 native Web组件.

由于 Angular 支持使用自定义 Web 组件，您将能够使用 Vue 组件(包装为 Web 组件).

对于 Angular 来说，自定义 Web 组件是否由 Vue 生成并没有什么区别(因为所有 Angular 都知道，它们可能是原生 HTML 元素).

演示

可在此处运行演示.

该演示是一个 Angular 5 应用程序.Vue 自定义组件定义在 index.html.请注意 app/app.component.html 直接在模板中使用，就像原生元素一样.

下面一步一步.

在 Vue 中

使用 vue-custom-element将您的 Vue 组件包装为 Web 组件:

<script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script><脚本>const MyVueWebComp = {道具:['味精']，模板:`<div style="border: 3px 绿色虚线；padding: 5px">我是 my-vue-web-comp.
"msg" 属性的值:{{ msg }}
<input v-model="text"><button @click="addText">点击我</button><div v-for="t in texts">文字:{{ t }}

`，数据() {返回 {文本: ''，文字:[]};},方法: {添加文字() {this.texts.push(this.text);this.text = '';}}};Vue.customElement('my-vue-web-comp', MyVueWebComp);

这将创建一个 <my-vue-web-comp> 网络组件，可以直接在 DOM 中使用，无需需要有一个可用的 Vue实例.

以上只是一个可直接在浏览器中运行的演示.如果您有 .vue 文件和 vue-cli 应用程序，您需要执行 npm install vue-custom-element --save 然后创建一个 .js 文件如:

从'vue'导入Vue；从 'vue-custom-element' 导入 vueCustomElement；从'./MyElement.vue'导入MyElement；Vue.use(vueCustomElement);Vue.customElement('my-element', MyElement);

然后，当捆绑时，将生成一个 .js 文件，该文件可以作为单个