vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue全局公共方法设置

如何设置Vue全局公共方法

作者:杰~JIE

这篇文章主要介绍了如何设置Vue全局公共方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前言

在开发中,为了提高重用性,简洁代码,往往需要把代码的公共部分提取出来,形成一个可复用的模块。

当代码提取出来形成模块后,要实现所有地方都可以引用,就需要把这些模块设置成全局属性。

所以,要实现全局公共方法

我们需要知道以下几个知识点:

一、设置全局属性

全局属性可以分为:全局变量和全局方法。

实现全局变量,常用的手段就是使用vuex (关于vuex 的使用方法这里不详细说明了),还有一种方法就是借助原型属性来实现。

下面,我将重点讲一下原型。

二、引用全局属性

在使用Vue时,我们都要写这么一串代码:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面代码是借助Vue构造函数创建一个Vue对象。

从这可以看出,Vue其实是一个对象。那么我们就可以借助Vue的原型实现对全局属性的引用。

首先,我们需要了解以下知识点:

什么是原型?

在js 代码中,我们经常会看到一个属性prototype 。他是构造函数(就是用来构造对象的函数)的属性,用于指向原型对象。

那什么是原型对象呢?

了解“原型对象”,我们需要把“原型”和“对象”拆开来说明。

先说对象,js 的内建对象有很多,例如:String 、Math 、Object 、Array 等等。

// 声明一个数组对象
const arr = Array();

以上是使用内建对象——数组的构造函数,创建一个数组。

当然,我们也可以设置自定义对象,也就是自己设置一个新的对象。

const obj = {};

以上代码就是设置了一个空对象。

那内建对象和自定义对象有什么区别呢?

内建对象和自定义对象的区别,就是内建对象自带了一些属性和方法。就如上面声明的数组对象。我们可以通过arr.length 属性来获数组的长度,或者可以通过arr.push() 方法来向数组新增一个元素。而自定义对象就没有这些属性和方法。这时,我们就会很疑惑,为什么同样是对象,两者的区别就这么大的区别呢?难到是上帝不公,创造的时候给了不同的待遇?

嘿!还别说,就是上帝(js源码)创造的时候设定的,但是他并不是不公,而是为了分工合作。但是,上帝还是为了广大民众着想留了后门——把他创造的工具留了下来。

那就是原型的访问工具 prototype__proto__

其实,内建元素跟自定义元素的区别就是在于原型的不同(没错,自定义元素也是有原型的,只是这个原型是Object 内建对象的原型)。

直观的说,原型是预先设定好的对象(可以说是我们创建的对象的祖先啦!),里面预设了各种各样的方法。

下面我们来看看arr 和 obj 的原型

在这里插入图片描述

在这里插入图片描述

上图的__proto__对象就是原型对象了。__proto__属性是一个指针(地址),指向了原型。原型原型,原本的形状。原型是一类对象的初始。所以不同的类型对象有着不同的原型。

__proto__与prototype的区别

到这里,可能大家就有点懵了。怎么又出现了prototype?不是__proto__吗?别急,现在就捋捋两者的关系。

首先,__proto__是对象的属性,指向对象的构造函数的原型。而prototype是函数的属性,指向它的原型。

其次,对象都是由函数(也就是构造函数)生成的。(这一点非常重要。要理解原型就要理解这句话,如果不理解就把它当做定理。)

基于以上两点可得出下图:

在这里插入图片描述

以上就是prototype__proto__的关系了。

三、全局共用方法添加与引用

借助原型实现全局共用方法的添加

至此,我们具备一下几点:

有访问的工具–prototype__proto__;原型是个对象,意味着我们可以对原型进行属性的增删改查;基于同一原型生成的对象,所有的对象的原型都是同一个。

那么,只要修改原型,所有基于同一原型生成的对象的原型都同步改变;

基于以上三点,只要我们在Vue实例化前借助prototype把全局公共方法挂载到原型上,就能让公共方法实现全局访问。

main.js中注册全局共用方法:

Vue.prototype.fn = function(){
  console.log("全局公共方法")
};
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

引用全局共用方法

全局共用方法可以通过两种手段来使用:

在组件中或者生命周期中直接通过this.fn()调用即可。

如果是通过Vue.prototype.fn()来调用,必须保证调用处的代码全局公共方法注册代码后面执行。

四、全局公共方法优化

虽然我们已经知道将方法挂载在Vue.prototype 就可以实现全局公共方法。

但是呢!当全局公共方法有很多时,我们就得需要写很多个Vue.prototype

这显然是不符合代码美观的。Vue.prototype 挂一个方法也是挂,挂一个对象也是挂。

那为什么我们不把所有的全局方法写在同一个js 文件中呢?

创建commonApi.js

function fn1(){
  console.log("全局方法一")
}
function fn2(){
  console.log("全局方法二")
}
function fn3(){
  console.log("全局方法三")
}
function fn4(){
  console.log("全局方法四")
}
// 将四个全局公共方法,组合成一个对象,并暴露出去
export default {
  fn1,
  fn2,
  fn3,
  fn4,
}

在main.js 进行配置:

import commonApi from './store/commonApi'
Vue.prototype.commonApi = commonApi;

组件内通过this引用:

text(){
  this.commonApi.fn1();
}

总结

以上就是新建全局公用的方法了。

这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文