Esto es de un componente secundario en Vue.js. Estoy tratando de pasar algunos datos del padre en sensorData , pero el enlace no ocurre porque el código a continuación usa una función de flecha para data . ¿Cómo puedo convertir esta función en una función normal para que this enlace esté disponible?
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"] } }) };Esto funcionó bien.
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"] } } } };Una expresión de función de flecha es una alternativa compacta a una expresión de función tradicional, pero está limitada y no se puede usar en todas las situaciones.
Existen diferencias entre las funciones de flecha y las funciones tradicionales, así como algunas limitaciones:
para más detalles allí:
Entonces, si desea usar la forma tradicional, puede usar esto.
export default { ... data: function() { return {...} } }si desea utilizar la función de flecha, si bien las funciones de flecha no tienen su propio puntero this, solo se pueden pasar argumentos cuando se llama a una función a través de call() o apply() (de esta manera no se puede enlazar esto).