欢迎加入前端交流群交流知识&&获取视频资料: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. 精确获取对象的类型:Object.prototype.toString()

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

  2. 【JAVA练习】- 一个逻辑题

    打印 1 3    4 5   8    12 7   12   20   32 9    16  28    48   80  ..... 输入任意一个奇数,输出那一行的数据 第一种方法找到规律进行 ...

  3. 2018年排名前20的数据科学Python库

    Python 在解决数据科学任务和挑战方面继续处于领先地位.业已证明最有帮助的Python库,我们选择 20 多个库,因为其中一些库是相互替代的,可以解决相同的问题.因此,我们将它们放在同一个分组. ...

  4. 用一条mysql语句插入多条数据

    这篇文章主要介绍了在mysql中使用一条sql语句插入多条数据,效率非常高,但是原理其实很简单,希望对大家有所帮助 假如有一个数据表A: id name title addtime 如果需要插入n条数 ...

  5. jquery Contains 实现查询

    var filter = $(this).val(); var filterResult = $(this).find('h2:Contains(' + filter + ')'); if (filt ...

  6. 关于 docsify ssr 的研究

    关于 docsify ssr 的研究 docsify 虽然不错, 但是不支持 seo .官网虽然提供 seo 的一个简单示例, 但总总问题在 issues 中无人解答. 今天再次尝试, 解决了 ind ...

  7. SpringBoot快速创建HelloWorld项目

    废话不多提,拿起键盘,打开 IDEA 就是一通骚操作. 打开 IDEA 后,首页选择 Create New Project,再接着按下图所示,快速搭建SpringBoot项目. 接下来将 Group ...

  8. vue中访问数据接口的配置

    业务API接口地址: http://localhost:3816/api/ 前端UI浏览地址:http://127.0.0.1:8080/#/home 由于同源策略的问题: 需要配置代理: 在开发环境 ...

  9. BZOJ 3329 Xorequ (数位DP、矩阵乘法)

    手动博客搬家: 本文发表于20181105 23:18:54, 原地址https://blog.csdn.net/suncongbo/article/details/83758728 题目链接 htt ...

  10. JQuery的wrap用法

    wrap是包裹元素的作用,比如我想在img外面包裹一个a标签时,可以这样写法: $(function(){ $('img').wrap(function(){ return '<a href=& ...