javascript - vue中如何导入导出

Question

我有两个文件:total.vue 和 completeness.vue。我会将图表从 total.vue 可视化为 completeness.vue，这将是我的管理仪表板，我将在其中放置 2 或 3 个其他图表。

我要从 total.vue 导出我的东西

<script>

    import Chart from 'chart.js';
    import JQuery from 'jquery'
    let $ = JQuery
    export default {
        name: 'total_chart',
        mounted() {
            var chart_total = this.$refs.chart_total;
            const ctx = chart_total.getContext("2d");
            const myChart = new Chart(ctx, {
                type: 'bar',
    ...
    ...
    ...
</script>

在 completeness.vue 中，我将像这样导入:

<template>
    <div id="total_chart">
        <div id="content">
            <canvas ref="chart_total"></canvas>
        </div>
    </div>
</template>

<script>

import  chart_total  from '@/components/total'

export default {
  components: {
    chart_total
  }
} 

</script>

没有结果指向我分配给 completeness.vue 的路线。

建议？

谢谢你的时间

Answer 1

您的代码实际上并未渲染组件。你应该这样做:

<template>
    <total-chart>
    </total-chart>
</template>

<script>

import TotalChart from '@/components/total'

export default {
  components: {
    TotalChart
  }
} 

</script>

然后是您的 total-chart 组件:

<template>
        <div id="content">
            <canvas ref="chart_total"></canvas>
        </div>
</template>

<script>

    import Chart from 'chart.js';
    import JQuery from 'jquery'
    let $ = JQuery
    export default {
        name: 'total-chart',
        mounted() {
            var chart_total = this.$refs.chart_total;
            const ctx = chart_total.getContext("2d");
            const myChart = new Chart(ctx, {
                type: 'bar',
    ...
    ...
    ...
</script>

仅供引用 - 您可能想阅读有关命名组件的内容:https://v2.vuejs.org/v2/guide/components-registration.html