欢迎加入前端交流群交流知识&&获取视频资料:749539640

如何在angularjs(1)中使用vue

参考: https://medium.com/@graphicbeacon/how-to-use-vue-2-0-components-in-an-angular-application-4d85bacc42dc

如何在angular2-7中使用vue

将Vue组件包装为本Web组件

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

对于Angular,如果自定义Web组件是由Vue生成的,那么它就没有区别(对于所有Angular都知道,它们可以是本机HTML元素)

这里使用element-ui作为组件导入angular使用

demo地址:https://stackblitz.com/edit/angular-nnbszr

index.html

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-custom-element@3.0.0/dist/vue-custom-element.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
const MyVueWebComp = {
props: ['msg'],
template:`
<div style="border: 3px dashed green; padding: 5px">
I am my-vue-web-comp.<br>
Value received via "msg" prop: {{ msg }}<br>
<input v-model="text"><button @click="addText">Type something and click me</button>
<div v-for="t in texts">
Text: {{ t }}
</div>
<div>
<el-button @click="show()" type="danger">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>我是vue Element 组件</p>
</el-dialog>
</div>
 
</div>
`,
data() {
return {
text: '',
texts: [],
visible : false
};
},
methods: {
addText() {
this.texts.push(this.text);
this.text = '';
},
show() {
this.visible = true;
}
}
};
Vue.customElement('my-vue-web-comp', MyVueWebComp);
</script>
<my-app>loading</my-app>

如果是ts内使用(同样vue.js也是再index.html引入)

declare var Vue: any;

app.module.ts

现在,在angular里,导入Web组件后(即他们Vue的产生与否),其配置为使用加入schemas: [CUSTOM_ELEMENTS_SCHEMA]@NgModule

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
schemas: [
CUSTOM_ELEMENTS_SCHEMA // Added for custom elements support
]
})
export class AppModule { }

app.component.html

现在直接在Angular模板中使用Web组件(从Vue生成或不生成)。例如,上面代码中定义的组件可以像以下一样使用:

<h3>Hello, {{ name }}</h3>

<p>In index.html, a Vue component is defined using Vue and is wrapped into a Web Component using vue-custom-element.<br>

Now, in Angular's template, use it as if it were a native HTML Element (or regular native Web Component).
</p> <my-vue-web-comp [msg]="name"></my-vue-web-comp>

有关更多详细信息,请查看vue-custom-element文档

angular里使用vue/vue组件怎么在angular里用的更多相关文章

  1. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  2. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  3. 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值

    多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  4. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  5. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  6. vue的组件详解

    什么是组件 组件(Component)是 Vue.js 最强大的功能之一.(好比电脑中的每一个元件(键盘,鼠标,CPU),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行互相融合,变 ...

  7. SPA框架 Angular、React、Vue

    指尖前端重构(React)技术调研分析   摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...

  8. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  9. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

随机推荐

  1. SQL server基本语法

    此处源于一个基本的SQL Server试题,基本上涵盖了SQL Server的全部基本语法,粘贴在此处,权当分享   --1.  创建TestDB数据库 create database TestDB; ...

  2. 【Oracle】表连接三种方式

    表连接的方式有三种分别是:排序合并连接(Sort Merge Join).嵌套循环连接(Nested Loops Join).哈希连接(Hash Join). 1. 排序合并连接(Sort Merge ...

  3. 用SQL Server查询所有数据并显示

    利用SQL Server查询数据,并把所有数据显示在页面上. "%> <%@page import="jdbc.sqlServer"%> <%@p ...

  4. 作业08之《MVC实现用户权限》

    1. 赋给用户一个userid,在用户角色表将用户和角色关联起来,在角色权限表中将角色和权限对应起来,权限表中存储的是左边菜单栏的名称. 2. 在判断权限时,通过用户的userid,获取其角色id,然 ...

  5. 预备篇 I :范畴与函子

    拓扑是研究几何图形或空间在连续改变形状后还能保持不变的一些性质的一个学科.它只考虑物体间的位置关系而不考虑它们的形状和大小. 拓扑是集合上的一种结构. 拓扑英文名是Topology,直译是地志学,最早 ...

  6. Ad hoc polymorphism

    与面向对象中的接口类或抽象类中定义的函数组类似: 函数的具体执行依赖与函数医用的类型. In programming languages, ad-hoc polymorphism[1] is a ki ...

  7. " \t\r\n\f"是什么意思

    空格字符 \t 制表符 \r 回车符 \n 换行符 \f 换页符

  8. luoguP4719 【模板】动态 DP 线段树+树链剖分+矩阵乘法+动态DP

    题目描述 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y,表示修改点x的权值为y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 输入输出格式 输入格式: 第一行,n,m分 ...

  9. PAT_A1072#Gas Station

    Source: PAT A1072 Gas Station (30 分) Description: A gas station has to be built at such a location t ...

  10. eas之树

    如何设置树的深度(即树总共有几级) // 设置树的深度为3,即树包括0.1.2三级结点 table.getTreeColumn().setDepth(3); 如何设置树的方向 树的方向包括两种:自上向 ...