vue暴露的全局方法_必备技能六、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();

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <span style="background-color:#FFE500;color:#000000;font-size:14px;"><b>【超实用课程内容】</b></span> </p> <ul> <li> <span style="color:#000000;font-size:14px;">通过对一个经典后台管理页面的创建和增删查改内容的讲解,把</span><span style="color:#000000;font-size:14px;">vuejs框架的关键知识点都穿插讲到。</span> </li> <li> <span style="color:#000000;font-size:14px;">包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。</span> </li> <li> <span style="color:#000000;font-size:14px;">为了让大家能构造出一个规范、安全的前端系统,课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。</span> </li> </ul> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b><br /> </b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;background-color:#FFE500;"><b>【课程如何观看?】</b></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;"><span style="color:#000000;">PC端:</span><a href="https://edu.csdn.net/course/detail/26277"><span style="color:#000000;">https://edu.csdn.net/course/detail/26277</span></a></span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">移动端:CSDN 学院APP</span> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="color:#000000;font-size:14px;">本课程为录播课,课程永久有效观看时长,但是大家可以抓紧时间学习后一起讨论哦~</span> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <span style="line-height:24px;color:#000000;font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span> </p>
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前端技术】<br /> Vue        互联网最火的前端框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端 HTTP 框架<br /> Element UI 前端 UI 框架<br /> Vue Element Admin 前端模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
<p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310007118712.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:24px;"><strong>走在技术前沿之 Vue3.0 新特性全面解析。 <strong>全网抢先看,做首批 Vue 3.0 开发者!!!</strong></strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>课程内容包含:<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>1.Vue 3.0之版本大更新</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>2.新特性重点关注</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>3.composition-api(组合式API)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>4.初始化Vue 3.0项目</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>5.setup函数</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>6.响应式系统API(reactive、ref、computed、watch等)</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>7.响应式系统工具集(unref、toRef、toRefs、isRef、isProxy等)<br /> </strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>8.生命周期钩子函数的变化</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>9.依赖注入</strong></span> </p> <p style="font-size:16px;"> <span style="font-size:20px;color:#595959;"><strong>10.模板refs</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;">教学全程采用笔记+代码案例的形式讲解,通俗易懂!!!</span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011021534.png" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011101181.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011183568.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310011275518.png" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span><strong>补充:想学习 Vue 2.x 的同学请移步以下地址</strong></span></strong><strong><span><strong></strong></span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#C00000;"><strong><span style="color:#FF0000;"><strong><a href="https://edu.51cto.com/course/10543.html"></a><a href="https://edu.csdn.net/course/detail/7906">https://edu.csdn.net/course/detail/7906</a> (</strong></span></strong><span style="color:#FF0000;"><strong><span></span></strong><strong><span></span></strong><strong><span><strong>Vue.js 2.0之全家桶系列视频课程)</strong></span></strong></span></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;"><strong><span><strong><span style="font-size:18px;"> </span></strong></span></strong></span> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"></span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong>讲师介绍</strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202005310012193677.jpg" alt="" /> </p> <p style="font-size:16px;"> <strong><span style="color:#FF0000;"><br /> </span></strong> </p>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页