在vue2中，提供了provide和inject配置，可以让开发者在高层组件中注入数据，然后在后代组件中使用除了兼容vue2的配置式注入，vue3在compositionapi中添加了provide和inject方法，可以在setup函数中注入和使用数据 基本使用provide('key',value)//app.vue定义数据import{provide,ref}from'vue'constsum=ref(1)provide('foo',sum)//其他页面调用import{inject}from'vue'letfoo=inject('foo')//传入key在其他任意页面都能获取到cons
在vue2中，提供了provide和inject配置，可以让开发者在高层组件中注入数据，然后在后代组件中使用除了兼容vue2的配置式注入，vue3在compositionapi中添加了provide和inject方法，可以在setup函数中注入和使用数据 基本使用provide('key',value)//app.vue定义数据import{provide,ref}from'vue'constsum=ref(1)provide('foo',sum)//其他页面调用import{inject}from'vue'letfoo=inject('foo')//传入key在其他任意页面都能获取到cons
前戏我是16年入了前端的坑，17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛，便一直没有正眼瞧过它一眼。直到20年进了一家小公司，做了很多类似的小项目，相同的代码拷来拷去，出现一个bug一堆项目都要改，实在恶心到我了。于是不得不开始考虑将一些公共的方法和组件提取出来，做成一个第三方库来维护。而在库的封装方面，rollup相对于webpack具有一定的优势。在此，便和大家分享一下如何自己造轮子，封装一个前端库并发布到npm仓库中去。源码这是我自己封装的3个库，有兴趣可以看看：https://github.com/moohng/dan;https://github.c
前戏我是16年入了前端的坑，17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛，便一直没有正眼瞧过它一眼。直到20年进了一家小公司，做了很多类似的小项目，相同的代码拷来拷去，出现一个bug一堆项目都要改，实在恶心到我了。于是不得不开始考虑将一些公共的方法和组件提取出来，做成一个第三方库来维护。而在库的封装方面，rollup相对于webpack具有一定的优势。在此，便和大家分享一下如何自己造轮子，封装一个前端库并发布到npm仓库中去。源码这是我自己封装的3个库，有兴趣可以看看：https://github.com/moohng/dan;https://github.c
最近在开发几个网站，为了优化一下前端代码，就复习一下gulpjs，之前工作gulp用的版本比较老，但是今天看了新的版本，新的语法出了一下，但是为了时间，我决定使用之前gulp3的旧版本，后面发现自己环境的node的版本是最新的，所以不得让我来了解一下gulp的新版本，里面用到的最多就是commonjs的模块化，解释如下：gulp4的官网地址：https://www.gulpjs.com.cn/gulp3的官网地址：https://v3.gulpjs.com.cn/ 下面代码了解新语法：const{src,dest,watch,task,series,parallel}=require('gu
最近在开发几个网站，为了优化一下前端代码，就复习一下gulpjs，之前工作gulp用的版本比较老，但是今天看了新的版本，新的语法出了一下，但是为了时间，我决定使用之前gulp3的旧版本，后面发现自己环境的node的版本是最新的，所以不得让我来了解一下gulp的新版本，里面用到的最多就是commonjs的模块化，解释如下：gulp4的官网地址：https://www.gulpjs.com.cn/gulp3的官网地址：https://v3.gulpjs.com.cn/ 下面代码了解新语法：const{src,dest,watch,task,series,parallel}=require('gu
看一个实际的例子：import{Component,Inject}from'@angular/core';import{Http}from'@angular/http';@Component({selector:'example-component',template:'Iamacomponent'})classExampleComponent{constructor(@Inject(Http)privatehttp){//use`this.http`whichistheHttpprovider}}此时，@Inject是指定此查找标记的手动方式，后跟小写的http参数告诉Angular分配它的
看一个实际的例子：import{Component,Inject}from'@angular/core';import{Http}from'@angular/http';@Component({selector:'example-component',template:'Iamacomponent'})classExampleComponent{constructor(@Inject(Http)privatehttp){//use`this.http`whichistheHttpprovider}}此时，@Inject是指定此查找标记的手动方式，后跟小写的http参数告诉Angular分配它的
下面是SAP电商云SpartacusUI两个AngularService类，都加上了@Injectable的注解，区别就在于是否具有输入参数providedIn：@Injectable()装饰器指定Angular可以在DI系统中使用这个类。这个注解的输入元数据，providedIn:'root'，意味着被注解的Angularservice类，在整个应用程序中都是可见的。当将服务（提供者）注入到我们的组件/服务中时，通过构造函数中的类型定义来指定我们需要的提供者。下面是一个例子：import{Component}from'@angular/core';import{Http}from'@angu
下面是SAP电商云SpartacusUI两个AngularService类，都加上了@Injectable的注解，区别就在于是否具有输入参数providedIn：@Injectable()装饰器指定Angular可以在DI系统中使用这个类。这个注解的输入元数据，providedIn:'root'，意味着被注解的Angularservice类，在整个应用程序中都是可见的。当将服务（提供者）注入到我们的组件/服务中时，通过构造函数中的类型定义来指定我们需要的提供者。下面是一个例子：import{Component}from'@angular/core';import{Http}from'@angu
