相信大家都用过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=" ...
随机推荐
-
MySQL存储过程动态SQL语句的生成
用Mysql存储过程来完成动态SQL语句,使用存储过程有很好的执行效率: 现在有要求如下:根据输入的年份.国家.节假日类型查询一个节假日,我们可以使用一般的SQL语句嵌入到Java代码中,但是执行效率 ...
-
Tomcat访问日志详细配置
在server.xml里的<host>标签下加上 <Valve className="org.apache.catalina.valves.AccessLogValve&q ...
-
js设置控件的隐藏与显示的两种方法
js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的sty ...
-
JSON串行化
大多数情况下,我们不会再Javascript中直接创建JSON字符串.而是,创建一些Javascript对象,这些对象和服务器上的.net对象对应.因此,可以在服务器上创建.net实体类,然后串行化成 ...
-
SNS团队第四次站立会议(2017.04.25)
一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 相关数据库文件建立起来 完善数据库文件 龚晓婷 研 ...
-
CSS:margin和padding之谜
margin外边距,padding内边距.光看书本的介绍,理解起来好费劲,那咱就举个荔枝:你家的保险箱,是那种镶在墙壁里的,保险箱与墙壁的距离就是margin,保险箱壁就是所谓的border,保险箱与 ...
-
tensorflow-gpu安装的一些注意
按正确的顺序安装,严格安装特定的版本 1,下载和安装严格版本的cuda和cuDnn,其他版本的不干活.比如要求9.0你就不能装9.1.https://www.tensorflow.org/instal ...
-
Distinct Subsequences leetcode java
题目: Given a string S and a string T, count the number of distinct subsequences of T in S. A subseque ...
-
Qt之QSS(样式表语法)
http://blog.csdn.net/liang19890820/article/details/51691212 版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者: ...
-
[iOS]UIImageView增加圆角
[iOS]UIImageView增加圆角 "如何给一个UIImageView增加圆角?有几种方法?各自区别?" 备注:本文参考自http://www.jianshu.com/p/d ...