Question

我对VueJS 2还是很陌生，所以想看看我是否以正确的方式工作。我有一个系统，其中有人上载包含数据的文件，然后将其用于创建图表。所以我向他们显示上传的文件

<tr v-for="file in files.data" :key="file.id">
     //file information
     <td>
         <router-link :to="{ name: file.chart, params: { fileName: file.name }}" 
                tag="a" exact> View Results
         </router-link>
     </td>
</tr>

所以您可以看到我在表中有一个链接，该链接将他们定向到他们上传的文件的图表页面。它包含要加载的文件名的参数。

在图表页面上，我在创建的方法中获得了参数。然后将它们传递给要显示的图表的组件

<template>
    <div>
       //some information
        <div class="row">
            <div class="col-12" id="parentDiv">
                <barchart :file-name = this.fileName></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Barchart from '../charts/Barchart';
    export default {
        components: {
            'barchart': Barchart
        },
        data() {
            return {
                fileName: ''
            }
        },
        created() {
            this.fileName = this.$route.params.fileName;
        }
    }
</script>

最后，我有了Barchart组件。这就是基于文件上传数据创建图表的原因。

<script>
    import * as d3 from 'd3';

    export default {
        props: {
            fileName: {
                type: String,
                required: true
            }
        },
        methods: {
            createBarChart() {
              //d3 to create chart using the file that was uploaded
            } 
        },
        created() {
            let vm = this;
            d3.json('storage/' + this.fileName)
                .then(function (data) {
                    vm.createBarChart(data);
                }).catch(function (error) {
                // handle error
            });
        }
    };
</script>

对我来说，似乎有很多数据从一个组件传递到另一个组件。我将其从文件显示组件（显示所有上传的文件）传递到图表页面，然后将其传递到图表组件。

另一个问题是，如果我在图表页面上，并且刷新页面，则该图表将不再具有文件名prop，因此该图表将无法呈现。我该如何处理情况？

任何建议表示赞赏

Answer 1

刷新时丢失图表的原因是由于使用了创建的方法。

在图表组件中，删除整个创建的方法，然后直接在条形图引用中引用路径参数，如下所示：

<template>
    <div>
       //some information
        <div class="row">
            <div class="col-12" id="parentDiv">
                <barchart :file-name="$route.params.fileName"></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Barchart from '../charts/Barchart';
    export default {
        components: {
            'barchart': Barchart
        },
        data() {
            return {

            }
        }
    }
</script>

Answer 2

您可能希望研究vuex，以管理从父级传递到某个深度嵌套的子级的数据。

在决定要将文件保留在嵌套组件中之前，您可能需要考虑这是否是好的UX（是否有意义，当用户刷新页面时，他们上载的旧文件是还可以缓存吗？）您可以考虑使用localStorage在本地存储内容，以便刷新后，数据仍然存在，而无需用户重新输入。

VueJS 2应用程序中数据传递的工作流程

2 个答案: