如何将此箭头函数转换为正常函数?

Question

来自Vue.js中的子组件。我试图从sensorData中的父传递一些数据，但绑定没有发生，因为下面的代码使用data的箭头函数。如何将此函数转换为普通函数，使this绑定可用

export default {
name: "SensorChart",
props: ["sensorData"],
data: () => ({
chartOptionsLine: {
xAxis: {
data: ["A","B","C","D","E","F","G"]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
// data: this.sensorData
data: [910, 423, 61, 752, 262, 3625, 119]
}
],
title: {
text: "Sample Data",
x: "center",
textStyle: {
fontSize: 20
}
},
color: ["#1271c2"]
}
})
};

Answer 1

运行正常

export default {
name: "SensorChart",
props: ["sampleData","sampleLabels"],
data: function() { 
return {
chartOptionsLine: { 
xAxis: {
data: this.sampleLabels
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: this.sampleData
}
],
title: {
text: "Sensor Data",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
}
}
}
};

Answer 2

箭头函数表达式是传统函数表达式的一种紧凑的替代品，但它有局限性，不能在所有情况下使用。

箭头函数与传统函数有区别，也有一些限制:

• 箭头函数没有自己对this、参数或的绑定
• 箭头函数不能访问new。目标关键词。
• 箭头函数不适合调用、应用和绑定方法，这通常依赖于建立作用域。
• 箭头函数不能用作构造函数。
• 箭头函数不能在其主体内使用yield。

查看更多细节:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions comparing_traditional_functions_to_arrow_functions

所以，如果你想用传统的方式，你可以用这个。

export default {
...
data: function() { return {...} }
}

虽然箭头函数没有自己的this指针，但当通过call()调用函数时，只能传递参数。或apply ()(这种方式不能绑定这个)。