gpt4 book ai didi

javascript - 在 Angular 中使用 Vue 组件

转载 作者:可可西里 更新时间:2023-11-01 01:37:14 25 4
gpt4 key购买 nike

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

我在媒体上看到了这个教程:How to use Vue 2.0 components in an angular application ,但该教程适用于 AngularJS。

我想知道以前是否有人这样做过,是否值得,是否有人知道任何教程或引用资料。

最佳答案

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

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

对于 Angular 而言,自定义 Web 组件是否由 Vue 生成并没有什么区别(就 Angular 所知,它们可能是原生 HTML 元素)。

演示

Runnable DEMO here.

该演示是一个 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 中使用的 Web 组件,无需需要一个有效的 Vue 实例。

以上只是一个直接在浏览器中运行的demo。如果你有 .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 's docs .

在 Angular 中

现在,在 Angular 应用程序中,在导入 Web 组件(无论是否由 Vue 生成)之后,configure them to be used by Angular通过添加 schemas: [CUSTOM_ELEMENTS_SCHEMA]在你的@NgModule :

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>

事实上,可运行的演示shows an example of that usage.

限制

您可能需要 polyfill 来支持旧版浏览器。请查看 vue-custom-element 's docs了解更多详情。

关于javascript - 在 Angular 中使用 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49724029/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com