如何將主Vue實例上的數據傳遞給vue-router使用的組件？

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

現在，您的組件是主實例的子組件，並且無法直接訪問父級屬性。 但是，有幾種方法可以做到這一點。

對於您的簡單用例，可以通過this.$parent或僅在模板中的$parent訪問父級。

對於更復雜的應用程序，此方法很快變得難以維護，您應該看看vuex 。