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

Question

如何通过 Vue.js 中的 router-view 将数据从我的主应用程序传递到组件？我已成功从 API 中获取数据，如下所示：

mounted() {
    // console.log(model)
    this.model = model;
    // console.log(this.model)
}

我要传递数据的组件已经加载如下：

@section('content')
<div style="padding: 0.9rem" id="app">
    <router-view name="bookBus"></router-view>
    <router-view></router-view>
    {{-- @{{ model }} --}}
</div>

@stop

如何将 model 数据传递给 bookBus 组件？

Answer 1

来自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.

所以如果你想从父组件向下传递数据，而不是从路由器，它会是这样的：

<router-view name="bookBus" :model="model"></router-view>

您的 bookBus 组件需要配置一个 model prop 来接收数据，就像任何其他 prop 一样。

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

How to pass data to a router-view in Vue.js

components

vue.js

vue-router