在 Angular 中使用 Vue 組件

Question

我有一個用 Vue 構建的項目，我想在 Angular 應用程序中重用 Vue 應用程序中的組件，這樣我就不必從頭開始重建每個組件。

我在 medium 上看到了這個教程： How to use Vue 2.0 components in an angular application ，但那個教程是針對 AngularJS 的。

我想知道以前是否有人這樣做過，是否值得，是否有人知道任何教程或參考資料。

Answer 1

將您的 Vue 組件包裝為原生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"></script>
<script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script>
<script>
  const MyVueWebComp = {
    props: ['msg'],
    template:`
    <div style="border: 3px dashed green; padding: 5px">
      I am my-vue-web-comp.<br>
      Value of "msg" prop: {{ msg }}<br>
      <input v-model="text"><button @click="addText">Click me</button>
      <div v-for="t in texts">
        Text: {{ t }}
      </div>
    </div>
    `,
    data() {
        return {
            text: '',
            texts: []
        };
    },
    methods: {
      addText() {
        this.texts.push(this.text);
        this.text = '';
      }
    }
  };
  Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>

這將創建一個<my-vue-web-comp>網絡組件，它可以直接在 DOM 中使用，而無需擁有一個可用的 Vue 實例。

以上只是一個可直接在瀏覽器中運行的演示。 如果您有.vue文件和 vue-cli 應用程序，則需要執行npm install vue-custom-element --save然后創建一個.js文件，例如：

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

Vue.use(vueCustomElement);
Vue.customElement('my-element', MyElement);

然后，當捆綁時，將生成一個.js文件，該文件可以作為單個<script>標簽直接導入，而不是上面的整個代碼和腳本標簽。

有關更多詳細信息，請查看vue-custom-element的文檔。

在角度

現在，在 Angular 應用程序中，在導入 Web 組件（無論它們是否由Vue 生成）后，通過在@NgModule添加schemas: [CUSTOM_ELEMENTS_SCHEMA]來配置它們以供 Angular 使用：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

//...

@NgModule({
  // ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA  // added this
  ]
})
export class AppModule { 

現在直接在 Angular 模板中使用 Web 組件（從 Vue 生成或不生成）。 例如，上面代碼中定義的組件可以像這樣使用：

<my-vue-web-comp [msg]="name"></my-vue-web-comp>

事實上，可運行的演示展示了這種用法的一個例子。

限制

您可能需要 polyfills 來支持舊瀏覽器。 請查看vue-custom-element的文檔以獲取更多詳細信息。