Question

我在一个HTML文件中使用了vue-router，没有单个文件组件。我正在为路线加载组件，但是如何将Vue数据对象中的内容传递给组件？

如果我在不使用Vue-router的情况下加载组件，则一切正常。但是，如果我将路径加载到该组件，它将无法正常工作。

const searchResults = Vue.component('search-results', {
                props: [
                    'results',
                    'page',
                    'totalPages',
                    'resultsContainerHeight'
                ],
                template: 
                <div>
                    <div style="height: 30px;"></div>
                    <div id="results-container" v-bind:style="{ minHeight: resultsContainerHeight + 'px' }">
                        <div class="card border-dark mb-3" v-for="result in results">
                            <div class="card-body text-dark">
                                <span class="float-right">{{Number(result.distance).toFixed(1)}} kms</span>
                                <h5 class="card-title">{{result.name}}</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <nav v-if="totalPages > 1">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" v-bind:class="{disabled: page == 1}">
                                <a class="page-link" href="#" @click="$emit('change-page',page-1)">Previous</a>
                            </li>
                            <li class="page-item" v-bind:class="{active: index+1 == page}" v-for="(pageNo,index) in totalPages"><a class="page-link" @click="$emit('change-page',index+1)" href="#">{{index + 1}}</a></li>
                            <li class="page-item" v-bind:class="{disabled: page == totalPages}">
                                <a class="page-link" href="#" @click="$emit('change-page',page+1)">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            });
        const router = new VueRouter({
            routes: [{
                path: "/",
                component: searchResults,
                props: {
                    results,
                    page,
                    totalPages,
                    resultsContainerHeight
                }
            }

            ]
        });
        var app = new Vue({
            router,
            el: '#app',
            data: {
                results: [],
                latLng: '',
                page: 1,
                totalPages: '',
                resultsContainerHeight: ''
            }

现在我得到：

未捕获的ReferenceError：未定义结果

但是我希望路由能够像在没有路由器的情况下加载组件一样工作。

Answer 1

您的组件现在是主实例的子组件，并且无法直接访问parent属性。但是，有几种方法可以做到这一点。

对于您的简单用例，可以通过this.$parent或仅通过模板中的$parent访问父级。

对于更复杂的应用程序，这种方法很快变得难以维护，您应该看看vuex。

如何将主Vue实例上的数据传递给vue-router使用的组件？

1 个答案: