如何将主 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: ''
}

现在我得到：

未

捕获的引用错误：未定义结果

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

Answer 1

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

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

对于更复杂的应用程序，这种方法很快就会变得无法维护，您应该看看vuex.