如何vue项目中使用构造函数——已解决

 

img

今天做项目的时候,遇到了一个问题,就是我需要在项目中使用构造函数。我们知道普通的构造函数中的this是指向该函数,如果在vue项目中使用this,表示的是vue事例。

一般构造函数:

如下面的例子,是我们的一般构造函数的书写方式,this指向的是该函数,用this.定义的是该函数的属性和方法。


function SocketTimers() {
	this.timerGroupId = '';
	this.allTimerIsPower = false;
	this.timerNum = '';
	this.socketTimer = [];
}

vue中定义构造函数:

因为继续使用一般的书写方法在vue项目中是会报错的,this并不指向构造函数,而是指向vue事例。所以我们要使用函数原型链的方法,给函数定义属性和方法,而不能直接使用this关键字了。 本次以在单独js文件定义构造函数为例,在vue组件中使用。

//js文件中的书写方法
export const SocketTimers = function () {
    SocketTimers.prototype.timerGroupId="";
    SocketTimers.prototype.allTimerIsPower=false;
    SocketTimers.prototype.timerNum="";
    SocketTimers.prototype.socketTimer=[];
    
};


//组件中使用
var socketTimers = new SocketTimers();

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。