如何将数据传递给 Vue.js 中的路由器视图
如何通过 Vue.js 中的 router-view 将数据从我的主应用程序传递到组件?我已成功从我的 API 中获取数据，如下所示:
How can I pass data from my main app to a component through router-view in Vue.js? I have successfully gotten the data from my API as shown below:
mounted() {
// console.log(model)
this.model = model;
// console.log(this.model)
}
我要传数据的组件已经加载完毕，如下图:
The component I want to pass data to has been loaded as shown below:
@section('content')
<div style="padding: 0.9rem" id="app">
<router-view name="bookBus"></router-view>
<router-view></router-view>
{{-- @{{ model }} --}}
</div>
@stop
如何将 model 数据传递给 bookBus 组件?
How do I pass the model data to the bookBus component?
推荐答案
来自 https://router.vuejs.org/en/api/router-view.html
任何非名字的 props 都会被传递给渲染组件，但是大多数时候每个路由的数据都包含在路由的参数中.
Any non-name props will be passed along to the rendered component, however most of the time the per-route data is contained in the route's params.
因此，如果您想从父组件而不是路由器向下传递数据，则应该是这样的:
So if you want to pass data down from the parent component, rather than from the router, it would be something like this:
<router-view name="bookBus" :model="model"></router-view>
您的 bookBus 组件需要配置一个 model 属性来接收数据，就像任何其他属性一样.
Your bookBus component would then need to have a model prop configured to receive the data, just like it would for any other prop.
相关文章