angular里使用vue/vue组件怎么在angular里用
欢迎加入前端交流群交流知识&&获取视频资料: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
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里用的更多相关文章
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值
多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue的组件详解
什么是组件 组件(Component)是 Vue.js 最强大的功能之一.(好比电脑中的每一个元件(键盘,鼠标,CPU),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行互相融合,变 ...
- SPA框架 Angular、React、Vue
指尖前端重构(React)技术调研分析 摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
随机推荐
- 精确获取对象的类型:Object.prototype.toString()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
- 【JAVA练习】- 一个逻辑题
打印 1 3 4 5 8 12 7 12 20 32 9 16 28 48 80 ..... 输入任意一个奇数,输出那一行的数据 第一种方法找到规律进行 ...
- 2018年排名前20的数据科学Python库
Python 在解决数据科学任务和挑战方面继续处于领先地位.业已证明最有帮助的Python库,我们选择 20 多个库,因为其中一些库是相互替代的,可以解决相同的问题.因此,我们将它们放在同一个分组. ...
- 用一条mysql语句插入多条数据
这篇文章主要介绍了在mysql中使用一条sql语句插入多条数据,效率非常高,但是原理其实很简单,希望对大家有所帮助 假如有一个数据表A: id name title addtime 如果需要插入n条数 ...
- jquery Contains 实现查询
var filter = $(this).val(); var filterResult = $(this).find('h2:Contains(' + filter + ')'); if (filt ...
- 关于 docsify ssr 的研究
关于 docsify ssr 的研究 docsify 虽然不错, 但是不支持 seo .官网虽然提供 seo 的一个简单示例, 但总总问题在 issues 中无人解答. 今天再次尝试, 解决了 ind ...
- SpringBoot快速创建HelloWorld项目
废话不多提,拿起键盘,打开 IDEA 就是一通骚操作. 打开 IDEA 后,首页选择 Create New Project,再接着按下图所示,快速搭建SpringBoot项目. 接下来将 Group ...
- vue中访问数据接口的配置
业务API接口地址: http://localhost:3816/api/ 前端UI浏览地址:http://127.0.0.1:8080/#/home 由于同源策略的问题: 需要配置代理: 在开发环境 ...
- BZOJ 3329 Xorequ (数位DP、矩阵乘法)
手动博客搬家: 本文发表于20181105 23:18:54, 原地址https://blog.csdn.net/suncongbo/article/details/83758728 题目链接 htt ...
- JQuery的wrap用法
wrap是包裹元素的作用,比如我想在img外面包裹一个a标签时,可以这样写法: $(function(){ $('img').wrap(function(){ return '<a href=& ...