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() {}
});

这边写了一个倒计时的指令，在页面使用：

60

其他方法和参数可以看官网。

混入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);

在页面中直接使用：

Component还有局部注册的，这个应该所有人都会，就不细说了。

Vue全局注册大概就这几个方法，当然，Vue还有另外一些指令，比如过滤器Vue.filter等也是可以全局编写。

欢迎关注Coding个人笔记 公众号