vue自定义全局组件(自定义插件)的用法

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

创新互联公司是一家专业提供武山企业网站建设,专注与做网站、成都网站设计、H5开发、小程序制作等业务。10年已为武山众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

首先写这个插件之前生成好一个目录来存放这个插件。博主我是将他放在一个component的loading目录下：

在该目录下，按博主习惯是写一个index.js文件还有一个组件loading.vue，index.js里面写的是关于loading.vue的install方法。代码如下所示：

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代码如下所示：

Loading.vue代码写完后然后就在默认的main.js文件中导入，通过使用Vue.use()方法导入刚刚写好的index.js：

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use(Loading)
new Vue({
 el: '#app',
 render: h => h(App)
})

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

你也可以在刚刚的loading.vue文件里面写自己的一些代码，比如写一个日历插件，按钮插件等等。如下面这个：

效果是一个滚动的圆：

vue自定义全局组件(自定义插件)的用法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

分享题目：vue自定义全局组件(自定义插件)的用法
转载注明：http://lszwz.com/article/pgphie.html

乐山网站建设

vue自定义全局组件(自定义插件)的用法

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接交换友情链接

乐山网站建设

vue自定义全局组件(自定义插件)的用法

其他资讯

联系我们

135-1821-9792

028-86922220

快捷导航

二维码

友情链接 交换友情链接

友情链接交换友情链接