vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui、mintui、iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html
其中最引人注意的一点就是vue.use()的使用,那么我们怎么样才能自己封装一个也使用vue.use()的组件呢,看下面:
一、vue自定义组件
以loading组件为例:
1,首先新建loading文件夹,并在文件夹内新建loading.vue和index.js文件,如下图

2,在loading.vue文件中写自己的组件,与普通的组件写法相同,如下图:

3,编辑index.js,核心为install属性,如下图:

4,main.js中引入相应的组件并用vue.use()使用组件,如下图:

此时可以直接在项目中的任何地方直接用
二、全局组件:
全局组件的使用十分简单,
首先,你需要一个组件,新建一个
然后在main.js中引入相应的文件并用vue.compoment()注册,如下图:

然后就可以直接全局使用了
然后,你需要在想使用该组件的地方引入并注册该组件,然后使用,如下图:

以上为全部内容。
vue自定义组件(vue.use(),install)+全局组件+局部组件的更多相关文章
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- iview简单使用+按需加载组件的方法(全局和局部)
1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue.js 组件-全局组件和局部组件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
随机推荐
- Java Integer中的IntegerCache小记
同事今天给我发了一个关于Java拆装箱的ppt,里面有这么一段代码 Integer c = Integer.valueOf(3); Integer d = Integer.valueOf(3); ...
- mysql-8.0.17-winx64 部署
1.官网下载mysql-8.0.17-winx64,选择Zip文件格式下载 2.解压到目标路径,我这里是E盘根目录,即E:\mysql8 3.根目录下创建my.ini,内容如下: [mysqld]#端 ...
- console的各种用法
console的各种用法 1.输出信息 console.log('消息内容!'); //输出普通信息 console.info('消息内容!'); //输出提示信息 (在ie上有区分) console ...
- apacheTop
1.监控 httpd 请求数据,请求统计 apachetop -f /var/www/access_log 2. apachetop -H hits (Will display stats on th ...
- SSD源码解读——损失函数的构建
之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...
- Raspbian 2019-06-20 发布
有关新Raspbian的信息是作为今天博客文章的一部分提供的,该帖子宣布了全新的Raspberry Pi 4: 为了支持Raspberry Pi 4,我们发布了一个全新的操作系统,基于即将发布的Deb ...
- Jdk1.8的安装(Linux和windows)
1.1 JDK1.8下载地址 JDK下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
- PAT Basic 1017 A除以B (20 分)
本题要求计算 /,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: 输入在一行中依次给出 A 和 B,中间以 1 ...
- h5转pb的两个坑
1.需要加上如下设置,否则转换前后输出可能不一致,这个主要针对dropout.BN层训练测试不一致 from keras import backend as K K.set_learning_phas ...
- 【bzoj2523】【CTSC2001】聪明的学生
真是神仙题,做完后感觉智商提(jiang)升(di)了 这种题一般都是把局面设成状态,然后发现可以由一种状态转移到另一种状态,那就是 $dp$ 了. 但是这道题怎么设呢? 题目中给了你一个结论,一般题 ...