必备技能六、Vue中实现全局方法

现实背景:很多时候我们会在全局调用一些方法。

  实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。

  先说野路子,因为其实野路子就是最根本的实现方式,官方的use实现也是一样的,只是use很好的封装了。

/*
 
*main.js中实例Vue时添加方法
*/
import Vue from 'vue';
//这样以后你就可以在该项目下的其他组件中使用hello了,直接调用  this.hello('正字表达狮')。
Vue.prototype.hello = function(name){
    console.log(`hello ${name}`)
}
 
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

  

原理很简单,因为Vue实质上就是一个对象。大多数对象都会存在原型对象,在Vue原型上添加了方法之后,new Vue()实例化时vm就继承了该方法。因为其他组件也会继承vm所以所有的组件都可以调用该方法。接下来看看Vue.use()。

  首先我新建一个deta.js。里面封装一个对象。

const date = {
    tickToLong(tick) {
        let seconds = tick / 1000;
        let h = Math.floor(seconds / 60 / 60);
        let m = Math.floor((seconds - 60 * 60 * h) / 60);
        let s = Math.floor(seconds - 60 * 60 * h - 60 * m);
        return h + ':' + m + ':' + s
    },
    tickToTime(tick){
        let date = new Date(tick);
        let h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
        let i = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
        let s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
        return h+':'+i+':'+s
    }
}
 
const install = function(vm, options) {//插件必须有这样一个install方法。
    vm.prototype._date = date;
}
export default { install }

  可以看到里面有一个install方法,然后将该方法暴露出来。install方法是必须的,可看官网use相关部分。我们发现install里面其实就是我们野蛮的第一中种方式。install当中的vm实际上就是Vue这个对象。所以本质上两种方式都是在vue原型上面添加了方法。当然建议大家在工作中不要使用第一种方法。因为别人会觉得你很low啊,而且你的main文件会莫名其妙多很多代码,自己看着也很难受啊。

但是由于模块比较多,我对于每个模块分配了不同的组件,发现一个项目中有许多相同的方法,
    在每个组件中我都需要进行重复的编写。

    所以,我希望能够将这些公共的方法,抽离出来放到同一个 js 中,这里就取名 util.js


3、实现方法

1、方法一

暴露接口的方式,直接在组件中进行引用

首先在 util.js 单独文件中写两个方法:

这里写图片描述

在组件中引用,测试了无法在 main.js 中全局引用(有方法请告诉我):

import {a,b} from '../static/js/util.js'

调用:

test: function() {
        a();
        b();
}

2、方法二:

将公共方法集成到 Vue 原型上,Vue.prototype.name

首先在 util.js 中写方法:

这里写图片描述

在 main.js 中进行全局引用:

这里写图片描述

调用:

this.adminApi.a();
this.adminApi.b();

转 https://segmentfault.com/u/allenchinese/activities?page=5

原文地址:https://www.cnblogs.com/qdwz/p/11497183.html