1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue自定义全局组件(或自定义插件)

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

时间:2019-11-10 19:27:02

相关推荐

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) {ponent('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>复制代码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。