Question

我对Vue.js很陌生，并且想知道如何导入vue组件。我有两个组成部分。第一个是Index.js，第二个是Ch.js. Index.js完美显示。我导入和Ch.js并没有出现。 Index和Ch都包含我构建的Chart.js图的相同代码。

如何让Ch.js像Index.js一样呈现？

index.vue

<template>
  <!-- <index></index> -->
  <ch></ch>
</template>

<script>
  import Index from '../components/index'
  import Ch from '../components/ch'
</script>

Ch.js

import { Line, mixins } from 'vue-chartjs'

export default Line.extend({
  mixins: [mixins.reactiveProp],
  props: ["data", "options"],
  mounted () {
    this.renderChart({
      labels: ['2:00pm', '2:15pm', '2:30pm', '2:45pm', '2:50pm'],
      datasets: [{
        borderColor: "#57C1E8",
        pointBackgroundColor: '#57C1E8',
        backgroundColor: 'rgba(220,220,220,0)',
        showTooltip: false,
        data: [5, 8, 3, 2, 3, 6, 3],
      }, {
        borderColor: "#82bc00",
        pointBackgroundColor: '#82bc00',
        backgroundColor: 'rgba(220,220,220,0)',
        showTooltip: false,
        data: [3, 4, 8, 6, 10, 2, 1]
      }, {
        borderColor: "#f7a800",
        pointBackgroundColor: '#f7a800',
        backgroundColor: 'rgba(220,220,220,0)',
        data: [8, 6, 10, 15, 6, 2, 3]
      }]
    }, {
      elements: {
        line: { tension: 0  },
        point: { radius: 0  }
      },
      responsive: true,
      maintainAspectRatio: false,
      legend: { display: false },
      scales: {
        yAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: "rgba(0,0,0, 0.2)",
            drawBorder: false,
          },
          ticks: { display: false }
        }],
        xAxes: [ {
          display: true,
          gridLines: {
            color: "rgba(0,0,0, 0.2)",
            borderDash: [10, 5],
            display: true,
            drawBorder: false
          }
        }]
      }
    })
  }
})

I've taken a look at this thread, but it didn't work/help

Answer 1

您的index.vue脚本标记应包含components/index.js文件的内容。
您的索引组件应导入Ch组件并在其Vue定义
您的索引模板应该包含一个包含所有其他内容的DOM元素

<template>
  <div>
    <ch></ch>
  </div>
</template>

<script>
  import Ch from '../components/ch';

  export default {
    // your index component vue here

    components: { Ch }

  };
</script>

Answer 2

export default {
  components: { Index, Ch }
}

必须调用才能获取组件。

使用Web包导入vue组件

2 个答案: