相信大家都用过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()使用组件,如下图:

此时可以直接在项目中的任何地方直接用

<Loading/>或者
<Loading></Loading>
来使用我们封装的组件了

二、全局组件:

全局组件的使用十分简单,

首先,你需要一个组件,新建一个

globalcomponent.vue文件,如下图:

然后在main.js中引入相应的文件并用vue.compoment()注册,如下图:

然后就可以直接全局使用了

<globalcomponent></globalcomponent>
或<globalcomponent/>
就是这么简单,实质上与vue自定义组件是一样的,只不过自定义组件多了一对函数,即:vue.use()和install
 
三、局部组件:
局部组件的使用非常简单,但是它不能再注册的组件外部使用,否则会报错
同样,首先,你需要一个组件,新建一个part-1.vue文件,如下图:

然后,你需要在想使用该组件的地方引入并注册该组件,然后使用,如下图:

以上为全部内容。

vue自定义组件(vue.use(),install)+全局组件+局部组件的更多相关文章

  1. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  2. iview简单使用+按需加载组件的方法(全局和局部)

    1,简单使用 vue项目中使用iview非常简单: 首先安装依赖: $ npm install iview --save 会安装最新版本的依赖,安装完成后package.json会出现如下图配置 表示 ...

  3. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  4. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  5. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  6. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  7. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  8. vue.js 组件-全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <! ...

  9. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

随机推荐

  1. python基础数据类型和初级应用

    1.整数: int -- 计算和比较 2 -- 10 推位 8421 20 21 -- 2**7 10 - 2 bit_length 二进制的有效占用位数 # 123 # 计算和比较 # 14 0 # ...

  2. 小白学习django第六站-http相关

    请求与相应 HttpRequest对象API def home(request): print('path:', request.path) print('mothod:', request.meth ...

  3. Asp.net4.5未在web服务器上注册

    在使用vs2012打开项目时,显示Asp.net4.5未在web服务器上注册?是由于没有下载一个补丁的原因,只需下载安装补丁 VS11-KB3002339.exe 下载地址:https://downl ...

  4. pc和手机适应js代码

    如果是手机的话跳转到新的地址 <script type="text/javascript"> function IsPC() { var userAgentInfo = ...

  5. linux 之实现定时任务

    一.方式一 (1)命令行 的方法: 一.方式一 需求:每分钟执行一次/etc 目录的添加 到/tmp/a.txt 中 (1) touch a.txt创建文件 (2) crotab -e 进行任务的定制 ...

  6. Hybrid APP架构设计

    通讯 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开. Native(以Android为例)和H5通讯,基本原理: Android调用H5:通过 ...

  7. python 有用的库

    1.Faker pip3 install faker官网: https://faker.readthedocs.io/en/master/providers.htmlgithub: https://g ...

  8. 初识linux内核漏洞利用

    0x00 简介 之前只接触过应用层的漏洞利用, 这次第一次接触到内核层次的,小结一下. 0x01 概况 这次接触到的,是吾爱破解挑战赛里的一个题,给了一个有问题的驱动程序,要求在ubuntu 14.0 ...

  9. Linux内核链表深度分析

    链表简介:链表是一种常用的数据结构,它通过指针将一系列数据节点连接成一条数据链.相对于数组,链表具有更好的动态性,建立链表时无需预先知道数据总量,可以随机分配空间,可以高效地在链表中的任意位置实时插入 ...

  10. GO (待更新)

    日期20190531,GO AND TOOLS FOR HOME 0  环境搭建 https://golang.org/dl/ Install the Go tools If you are upgr ...