vue暴露的全局方法_Vue中实现全局方法

内心背景:今天偶然上到论坛,看到关于Vue的两篇阅读量破千,我TM膨胀了啊。赶快再写一篇我开始用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文件会莫名其妙多很多代码,自己看着也很难受啊。

这些也只是工作时看到的问题如果有什么不对的,也欢迎讨论

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页