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

Question

如何通过router-viewVue.js 将数据从主应用程序传递到组件？我已成功从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

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

因此，如果您想从父组件而不是从路由器传递数据，将是这样的：

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

bookBus然后，您的组件将需要model配置一个道具来接收数据，就像其他道具一样。