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