当前位置: 首页 > Web前端 > vue.js

如何在角度中使用vue

时间:2023-03-31 23:35:08 vue.js

将Vue组件包装到此Web组件中。由于Angular支持使用自定义Web组件,因此可以使用Vue组件(包装为Web组件)。对于Angular来说,如果自定义的web组件是Vue生成的,那没有什么区别(Angular都知道,它们可以是原生的HTML元素)我们使用vue-custom-element来包裹demo地址:这里将element-ui导入为acomponentintoangular使用代码地址>loading如果在ts中使用(vue.js也是从index.html导入的)declarevarVue:any;app.module.ts现在,在angular中,在导入Web组件后,它被配置为使用添加模式:[CUSTOM_ELEMENTS_SCHEMA]:import{NgModule,CUSTOM_ELEMENTS_SCHEMA}from'@angular/core';import{BrowserModule}from'@angular/platform-b??rowser';import{FormsModule}from'@angular/forms';import{AppComponent}from'./app.component';@NgModule({imports:[BrowserModule,FormsModule],declarations:[AppComponent],bootstrap:[AppComponent],schemas:[CUSTOM_ELEMENTS_SCHEMA//Addedforcustomelementssupport]})exportclassAppModule{}app.component.html现在直接在Angular模板中使用Web组件(从Vue或not)例如,上面代码中定义的组件可以这样使用:使用vue-custom-element进入Web组件。
现在,在Angular的模板中,使用它就像使用原生HTML元素(或常规原生Web组件)一样。

查看vue-custom-element文档了解更多详情。参考:how-to-use-vue-2-0-components-in-an-angular-application