vue自定义全局组件(或自定义插件)

最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法。

下面就利用这个install来写一个自己的插件。

目录路径如下：

在该目录下，1个index.js和1个组件loading.vue，index.js里面写的是关于loading.vue的install方法。

index.js 代码如下所示：

import LoadingComponent from './Loading.vue'const Loading = {install: function (Vue) {Vue.component('Loading', LoadingComponent)}
}export default Loading
复制代码

install方法表示在main.js中，如果使用Vue.use()方法的话，则该方法默认会调用install方法。在install方法里面还注册了组件，这里面'Loading'指的是外面App.vue使用的组件名，LoadingComponent指的是上面引过来的Loading.vue。之后通过export default Loading导出。

Loading.vue代码如下所示:

<template><div class="loading-box">Loading...</div>
</template>
<script></script>
复制代码

main.js里面如何下：

import Vue from 'vue'
import Loading from 'components/loading'Vue.use(Loading)
复制代码

App.vue方法里面使用该模板就可以了：

<template><div id="app"><Loading></Loading></div>
</template>
复制代码

转载于:https://juejin.im/post/5b23763cf265da59bf79f3eb

vue自定义全局组件(或自定义插件)相关推荐

vue 添加全局组件_自定义vue2.0全局组件（下篇）
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法.虽然能用,但是还不算完美,可扩展性不够强大.在这一篇中,老K继续为大家完善这个按钮组件. 启动命令窗口, 进入在上篇中我们搭建的vue目录中 ...
vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与"加载中--"打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一 ...
Vue指令_常用vue指令_自定义全局指令_自定义局部指令---vue工作笔记0016
然后我们开始去看vue中的指令,以及自定义指令可以看到这里列出了他给的一些指令. 大部分我们不常用而且有些我们用过了,比如 v-bind 一般我们省略,然后剩下一个: 来使用就可以了.
Vue：把组件作为自定义元素来使用以及Identifier ' simple_couter' is not in camel case问题解决
这里介绍两种组件调用的方法: 1.直接在当前组件(HelloVue.vue)中使用Vue.component插入一个子组件button-counter: <template><div ...
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
一.创建countDown.vue(倒计时组件): <template><span :endTime="endTime" :endText="endTe ...
Vue3（撩课学院）笔记04-高阶API-mixin混入，mixin自定义属性，全局配置mixin，自定义全局指令，自定义局部指令，自定义指令传入数据，teleport传送门
1.Mixin混入将课复用代码独立出来用于复用通过创建Mixin对象将复用代码放在Mixin对象中在根组件中添加mixins属性,通过数组来存放多个minxin对象(也就是把minin内容混入根 ...

vue自定义全局组件(或自定义插件)

下面就利用这个install来写一个自己的插件。

目录路径如下：

在该目录下，1个index.js和1个组件loading.vue，index.js里面写的是关于loading.vue的install方法。

index.js 代码如下所示：

Loading.vue代码如下所示:

main.js里面如何下：

App.vue方法里面使用该模板就可以了：

vue自定义全局组件(或自定义插件)相关推荐

最新文章

热门文章