Vue.js 如何从道具中注入价值？

我有以下图表组件：

<template>
  <div class="gauge-chart">
    <chart :options="options"></chart>
  </div>
</template>

<script>
export default {
  props: {
    chartValue: { type: Number, required: true },
    chartName: { type: String, required: true },
  },
  data: () => ({
    options: {
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 1,
          max: 5,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, "#7CFFB2"],
                [0.5, "#58D9F9"],
                [0.75, "#FDDD60"],
                [1, "#FF6E76"],
              ],
            },
          },
          pointer: {
            icon: "arrow",
            offsetCenter: [0, "-30%"],
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: "auto",
              width: 1,
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: "auto",
              width: 5,
            },
          },
          title: {
            fontSize: 30,
          },
          data: [
            {
              value: this.chartValue,
              name: this.chartName,
            },
          ],
        },
      ],
    },
  }),
};
</script>

导出默认值{
道具：{
chartValue:{type:Number，必需：true}，
图表名称：{type:String，必需：true}，
},
数据：（）=>({
选项：{
系列：[
{
类型：“仪表”，
startAngle:180，
端角：0，
民:1,，
最高：5，
电话号码:8,，
轴线：{
线型：{
宽度：6，
颜色：[
[0.25，#7CFFB2”]，
[0.5，#58D9F9”]，
[0.75，#FDDD60”]，
[1，“#FF6E76”]，
],
},
},
指针：{
图标：“箭头”，
offsetCenter:[0，“-30%”，
项目样式：{
颜色：“自动”，
},
},
axisTick：{
长度：12，
线型：{
颜色：“自动”，
宽度：1，
},
},
分割线：{
长度：20，
线型：{
颜色：“自动”，
宽度：5，
},
},
标题：{
尺寸：30，
},
数据：[
{
value:this.chartValue，
名称：this.chartName，
},
],
},
],
},
}),
};

如您所见，我正在尝试将chartValue和chartName道具分别注入options.series.data.value和options.series.data.name

属性的值来自

<GaugeChart chartName="Sleep" :chartValue="2" />

目前，这些值是硬编码的，但最终它们将是动态的。 但是，它会不断抛出以下错误：

“TypeError:无法读取未定义的属性'chartName'” “TypeError:无法读取未定义的属性'chartValue'”

我对这两个属性都做了一个colsole.log，它们分别是“Sleep”和2。我还对这两个属性名进行了typeof，它们分别显示为字符串和数字

谁能告诉我哪里出了问题？

---

非常感谢。

您不能在箭头函数中使用“this”运算符，因此请将数据节定义为普通函数

<script>
export default {
  props: {
    chartValue: { type: Number, required: true },
    chartName: { type: String, required: true },
  },
  data() {
   return {
    options: {
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 1,
          max: 5,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, "#7CFFB2"],
                [0.5, "#58D9F9"],
                [0.75, "#FDDD60"],
                [1, "#FF6E76"],
              ],
            },
          },
          pointer: {
            icon: "arrow",
            offsetCenter: [0, "-30%"],
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: "auto",
              width: 1,
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: "auto",
              width: 5,
            },
          },
          title: {
            fontSize: 30,
          },
          data: [
            {
              value: this.chartValue,
              name: this.chartName,
            },
          ],
        },
      ],
    },
  };
 }
};
</script>

导出默认值{
道具：{
chartValue:{type:Number，必需：true}，
图表名称：{type:String，必需：true}，
},
数据（）{
返回{
选项：{
系列：[
{
类型：“仪表”，
startAngle:180，
端角：0，
民:1,，
最高：5，
电话号码:8,，
轴线：{
线型：{
宽度：6，
颜色：[
[0.25，#7CFFB2”]，
[0.5，#58D9F9”]，
[0.75，#FDDD60”]，
[1，“#FF6E76”]，
],
},
},
指针：{
图标：“箭头”，
offsetCenter:[0，“-30%”，
项目样式：{
颜色：“自动”，
},
},
axisTick：{
长度：12，
线型：{
颜色：“自动”，
宽度：1，
},
},
分割线：{
长度：20，
线型：{
颜色：“自动”，
宽度：5，
},
},
标题：{
尺寸：30，
},
数据：[
{
value:this.chartValue，
名称：this.chartName，
},
],
},
],
},
};
}
};

不能在箭头函数中使用“this”运算符，因此请将数据节定义为普通函数

<script>
export default {
  props: {
    chartValue: { type: Number, required: true },
    chartName: { type: String, required: true },
  },
  data() {
   return {
    options: {
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 1,
          max: 5,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.25, "#7CFFB2"],
                [0.5, "#58D9F9"],
                [0.75, "#FDDD60"],
                [1, "#FF6E76"],
              ],
            },
          },
          pointer: {
            icon: "arrow",
            offsetCenter: [0, "-30%"],
            itemStyle: {
              color: "auto",
            },
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: "auto",
              width: 1,
            },
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: "auto",
              width: 5,
            },
          },
          title: {
            fontSize: 30,
          },
          data: [
            {
              value: this.chartValue,
              name: this.chartName,
            },
          ],
        },
      ],
    },
  };
 }
};
</script>

导出默认值{
道具：{
chartValue:{type:Number，必需：true}，
图表名称：{type:String，必需：true}，
},
数据（）{
返回{
选项：{
系列：[
{
类型：“仪表”，
startAngle:180，
端角：0，
民:1,，
最高：5，
电话号码:8,，
轴线：{
线型：{
宽度：6，
颜色：[
[0.25，#7CFFB2”]，
[0.5，#58D9F9”]，
[0.75，#FDDD60”]，
[1，“#FF6E76”]，
],
},
},
指针：{
图标：“箭头”，
offsetCenter:[0，“-30%”，
项目样式：{
颜色：“自动”，
},
},
axisTick：{
长度：12，
线型：{
颜色：“自动”，
宽度：1，
},
},
分割线：{
长度：20，
线型：{
颜色：“自动”，
宽度：5，
},
},
标题：{
尺寸：30，
},
数据：[
{
value:this.chartValue，
名称：this.chartName，
},
],
},
],
},
};
}
};

您应按以下方式使用道具：

<GaugeChart chart-name="Sleep" chart-value="2" />

HTML属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写

---

您应按以下方式使用道具：

<GaugeChart chart-name="Sleep" chart-value="2" />

HTML属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写

---

你在哪里打印了控制台，并在图表组件中看到了…呢？假设

Sleep

和

2

是静态的，它应该是这样的=>

data@Amaarrockz我是在图表组件中的一个挂载木马中完成的。@NileshPatel在chartValue前面没有分号，2将作为字符串（“2”）传递。但是我希望它以数字（2）的形式传递。@MikeyKatholnig在数据对象

data（）{return val:2}

中创建一个属性，并像

那样使用它，你在哪里打印控制台并看到…在图表组件中？它应该像这样