如何将数据传递给 Vue.js 中的路由器视图

How to pass data to a router-view in Vue.js(如何将数据传递给 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.

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