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=" ...
随机推荐
- linux基础命令<二>
1.关机 init 0 poweroff halt shutdown –h now 2.重启 init 6 reboot shutdown –r now 3.查询都有那些用户在系统 ...
- 用python操作mysql数据库
数据库的安装和连接 PyMySQL的安装 pip install PyMySQL python连接数据库 import pymysql db = pymysql.connect("数据库ip ...
- 从入门到自闭之Python名称空间
名称空间: 内置空间:python解释器自带的一块空间 全局空间:py文件中顶格写的就是全局空间 局部空间:函数体中就是局部空间 加载顺序: 内置空间 全局空间 局部空间 # def func(): ...
- 剑指Offer 1-41 代码(python实现)
今天主要写了一下offer 1-41题,余下的稍后整理 1 """ 1 镜像二叉树: 递归 """ def mirror(root): if ...
- [转载]布隆过滤器(Bloom Filter)
[转载]布隆过滤器(Bloom Filter) 这部分学习资料来源:https://www.youtube.com/watch?v=v7AzUcZ4XA4 Filter判断不在,那就是肯定不在:Fil ...
- springboot(二十二)-sharding-jdbc-读写分离
前面我们使用sharding-jdbc配置了分库分表.sharding-jdbc还有个用法,就是实现读写分离. 什么时候需要或者可以使用读写分离? 当我们的项目所使用的数据库查询的访问量,访问频率,及 ...
- python如何判断字符串是否以某个字母或者数字结尾
1.如果是对某个确定的字符或者数字进行判断,可以直接使用endswith()方法 # 判断str_a是否以‘A’结尾 str_a = '20190813A' print(str_a.endswith( ...
- Elasticsearch中文文档,内容不全
注意 内容不全,这是观看中文文档进行操作的 文档地址 旧版中文文档,部分内容过期 https://www.elastic.co/guide/cn/elasticsearch/guide/current ...
- android app 闪屏
main activity package com.splash.screen; import android.app.Activity; import android.content.Intent; ...
- 标准C语言(2)
字符类型名称是char,这个类型里一共包含256个不同的整数,每个整数代表一个字符(例如'a', '&'等),这些整数和字符可以互相替代,ASCII码表记录了所有整数和字符之间的对应关系 'a ...