vue插件 使用use注册Vue全局组件和全局指令
插件一般会注册到全局使用
官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html
全局组件:
、首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template>
<div>
loading..............
</div>
</template> <script>
export default { }
</script> <style scoped>
div{
font-size:40px;
color:#f60;
text-align:center;
}
</style>
在index.js中,规定了使用这个组件的名字,以及使用方法,如:
import loadingComponent from './loading.vue' const loading={
install:function(Vue){
Vue.component('Loading',loadingComponent)
} //'Loading'这就是后面可以使用的组件的名字,install是默认的一个方法
}; export default loading;
只要在index.js中规定了install方法,就可以像一些公共的插件一样使用Vue.use()来使用,如: import loading from './loading' Vue.use(loading)
这是在入口文件中引入的方法,可以看到就像vue-resource一样,可以在项目中的任何地方使用自定义的组件了,比如在home.vue中使用 <template>
<div>
<Loading></Loading>
</div>
</template>
这样就可以使用成功
转自:https://www.cnblogs.com/670074760-zsx/p/7049806.html
其他全局可参见:https://blog.csdn.net/runonway/article/details/78998631
vue插件 使用use注册Vue全局组件和全局指令的更多相关文章
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- 如何开发和发布一个Vue插件
前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...
- 手把手教你写vue插件并发布(二)
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- 从零开始学 Web 之 Vue.js(六)Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- vue项目组件的全局注册
在vue-cli项目中,我们经常会封装自己的组件,并且要在多个界面中引用它,这个时候就需要全局注册组件. 首先我们会封装自己的组件,比如twoDimensionTable文件夹下的index.vue: ...
- vue自定义全局组件(自定义插件)
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用elemen ...
随机推荐
- [ZJOI2019]游记之我的第一次省选--自闭记
2019/3/23 day -1 今天是体育中考....(祝我好运) 实心球再次投出测量范围,虽然成绩是10.5,但是目测有15米. 立定跳远2.70,好近,我爸叫我跳2.8的QwQ. 1000米最后 ...
- UVALive - 4225(贪心)
题目链接:https://vjudge.net/contest/244167#problem/F 题目: Given any integer base b ≥ 2, it is well known ...
- TCP的三次握手和四次挥手图解
1. TCP建立连接的三次握手 (1)第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给Server,Client进入SYN_SENT状态,等待Server确 ...
- OpenLayers学习笔记(六)— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
- HDU/HDOJ 1867 A + B for you again
仔细了解KMP之后再看这题就会发现是裸题. 因为kmp我们可以求出s的f数组,表示能与p的多少前缀匹配.那么我们只需取f[s.size() - 1]即可. #include <cstdio> ...
- es6快速入门
上次分享了es6开发环境的搭建,本次接着分享es6常用的特性. 1.变量声明let和const 我们都是知道在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内 ...
- 编译:ffmpeg,精简ffmpeg.exe
网上下载的各种 ffmpeg.exe ,最少都有11M+ 而我只需要处理 mp4 和 mp3,在网上搜索了一下精简ffmpeg的文章,折腾一天,也没有完全搞定,但多少有些收获,记录一下: 从 www. ...
- 第五节,Neural Networks and Deep Learning 一书小节(中)
在这一节,我们对上一个程序(Network1.py)进行了优化 3.改进神经网络的学习方法 (1)交叉熵代价函数的引入 Network1程序采用了S型神经元,S型神经元存在一个问题,当输出层神经元的输 ...
- 安装Androidsdudio时
安装Androidsdudio时,Androidsdudio的路劲可以任意选择,但Androidsdk的路劲就默认到c盘里.然后安装后就可以直接用了
- scp从远程指定目录拷贝文件到本地指定目录
scp从远程指定目录拷贝文件到本地指定目录 [root@picts ~]# cat /root/scp_pictures.sh #!/bin/bash # Function: copy files f ...