Vue全局注册
Vue开发过程中经常会有公告的模板或者过滤器等，这些都要依赖vue全局注册一些方法、属性、模板等。
创建plugin.js：
export default {
install:(Vue) => {
}
}main里面引入：
import plugin from './utils/plugin'
Vue.use(plugin);之前说过了Vue.use，我们把接下来注册全局的方法都写在install里面。
全局注册属性或者方法：
Vue.a = 100;
Vue.myFun = () => {
console.log(200)
}因为这是用的JavaScript类的静态特性，所以调用的时候要有Vue的对象，在页面中要引入Vue:
import Vue from 'vue'然后在生命周期里直接调用：
mounted(){
console.log(Vue.a)
console.log(Vue.myFun)
}原型实例方法或者属性：
Vue.prototype.$myNum = 400;
Vue.prototype.$myCon = () => {
console.log(300);
}在页面中调用：
console.log(this.$myNum);
this.$myCon();这里用的是JavaScript在原型中添加方法或者属性。
Vue提供了自定义指令的功能：
Vue.directive('time-down', {
bind(el, binding) {
let time = parseInt(binding.value);
let setInter = setInterval(() => {
time--;
el.innerHTML = time;
if(time == 0){
clearInterval(setInter);
};
},1000);
},
inserted() {},
update() {},
componentUpdated() {},
unbind() {}
});这边写了一个倒计时的指令，在页面使用：
<p v-time-down="60">60</p>其他方法和参数可以看官网。
混入Vue.mixins()，之前有介绍了混入，混入也是vue全局注册的一个方法。
注册组件Vue.component()：
可以直接用语法，我直接新建一个comTest.vue文件：
<template>
<div class="">
<p>这是全局测试组件</p>
</div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
},
methods: {},
components: {}
}
</script>
<style scoped>
</style>然后plugin.js引入并注册：
import comTest from '@/views/comTest'
Vue.component('com-test', comTest);在页面中直接使用：
<com-test></com-test>Component还有局部注册的，这个应该所有人都会，就不细说了。
Vue全局注册大概就这几个方法，当然，Vue还有另外一些指令，比如过滤器Vue.filter等也是可以全局编写。
（完）
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-10-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
