如何从包含Vuejs中不同图表的App.vue中显示所需的/特定的图表

Question

为了显示图表，我使用Chartjs创建了charts.vue组件，其中定义了不同的图表。

这是我的Charts.vue:

<template>
  <div class="chart-containr">
    <canvas ref="chart1"></canvas>
    <canvas ref="chart2"></canvas>
  </div>
</template>

<script>
...
</script>

这是我的App.vue:

<template>
  <div class="content-1">
    <charts/>  <-- Here i want to display my chart 1
  </div>

  ....

  <div class="content-8">
    <charts/>  <-- Here i want to display my chart 2
  </div>
</template>

<script>
import chart from './Charts'
exprt default{
  name: 'App',
  component: {chart}

    ....

}

正如您在我的App.vue中所看到的，我已经导入了Charts.vue，并且使用了图表作为组件，但是如果我在模板部分使用它，因为这两个图表都是一个接一个地显示的。相反，我希望chart1在第1 div，chart2在第8 div。

请帮助我在这方面，我想显示特定的图表从charts.vue在App.vue的不同部分。我试过用道具，但我想办法解决。

Answer 1

您可能会使用一个支柱并在组件上插入id。

Charts.vue (应该以这种方式重命名为Chart.vue )

<template>
  <div class="chart-containr">
    <canvas :ref="`chart${chartId}`"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String,
      default: '',
    },
  },
}
</script>

App.vue

<template>
  <div class="content-1">
    <charts chart-id="1"></charts>
  </div>

  <div class="content-8">
    <charts chart-id="2"></charts>
  </div>
</template>

也许也有一种有插槽的方法，但道具在这里就足够了。

顺便说一句，您甚至可以通过v-for编程显示<charts>组件。