您的位置:首页 > Web前端 > Vue.js

vue插件 使用use注册Vue全局组件和全局指令

2018-08-09 10:08 996 查看

插件一般会注册到全局使用

官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html

全局组件:

1、首先建一个自定义组件的文件夹,比如叫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://www.geek-share.com/detail/2726337876.html

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: