Javascript 如何将所选密钥传递给其他模板

如何将所选关键点传递给另一个模板以显示图表？我创建了一个导出多折线图的模板，在该模板中，我使用Axios从API获取数据

在主页中，我创建了一个下拉列表，当用户选择一个项目时，所选项目或其值将传递给该图表模板，该模板应将图表返回给该所选项目

//主分量 城市 选择城市 {{data.city} 地区 选择区域 {{data.area} 病房 选择病房 {{data.ward} 极 选杆 {{data.poleid}

---

您可以通过组件中的道具传递数据

<Areachart :data="values"/>

或者，您可以制作一个事件总线并发送数据。可以使用$emit发送事件，使用$on捕获事件

通过道具传递_键我假设它的类型是String并且是必需的； 监视_键的更改并调用updateChart方法，因此每当父项更改_键时，都会进行相应的API cal； 定义updateChart方法，该方法发送GET请求、处理该请求并重新提交图表。 调用挂载钩子中的updateChart方法获取初始数据； 在数据中定义数据集，以便您可以在后续操作中更改它们 服务器响应处理程序。 别忘了在父组件中传递_keyprop。

---

感谢您的回复，请让我知道如何在Areachart模板中获取该值并将该值传递给我的API。bro我已更新代码，请检查它…在下拉菜单中选择“极点”后，我需要显示图表。@Pavan，bro，更新了答案：。只需将data.poleId作为_键传递。添加后：_键=data.poleId内部显示空白页。TypeError:无法读取未定义的属性“poleId…”属性或方法数据未在实例上定义，但在呈现期间被引用。请确保此属性是reactiveOh，抱歉，应该是：_key=PoleSelected。

<Areachart :data="values"/>

// In ParentComponent
<template>
  <Areachart :_key="PoleSelected"/>
</template>

<script>
import { Line } from "vue-chartjs";

export default {
  extends: Line,
  props: {
    _key: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      datasets: [
        {
          label: "Data One",
          borderColor: "#FC2525",
          data: []
        },
        {
          label: "Data Two",
          borderColor: "#05CBE1",
          data: []
        }
      ]
    };
  },
  watch: {
    _key() {
      this.updateChart();
    }
  },
  mounted() {
    this.updateChart();
  },
  methods: {
    updateChart() {
      axios
        .get("http://172.31.0.114:5008/api/city/data" + this._key)
        .then(res => {
          // proccess the response
          // I don't know your data model, so i can't write appropriate handler
          // for example this.datasets[0].data = res.data[0]

          this.renderChart(
            {
              labels: [],
              datasets: this.datasets
            },
            { responsive: true, maintainAspectRatio: false }
          );
        })
        .catch(function(error) {
          console.log("Error:", error);
        });
    }
  }
};
</script>