如何在Vue.js中将数据传递到路由器视图 [英] How to pass data to a router-view in 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

如何通过将模型数据添加到 bookBus 组件？

How do I pass the model data to the bookBus component?

推荐答案

来自 https://router.vuejs.org/en/api/router- view.html

任何非命名道具都会传递给渲染的组件，但是大多数情况下路径数据包含在路径的参数中。

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 组件将需要具有模型道具被配置为接收数据，就像其他道具一样。

Your bookBus component would then need to have a model prop configured to receive the data, just like it would for any other prop.

这篇关于如何在Vue.js中将数据传递到路由器视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！