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

Posted 2023-02-23

【中文标题】如何将数据传递给 Vue.js 中的路由器视图

【英文标题】：How to pass data to a router-view in Vue.js

【发布时间】：2018-09-16 16:42:50

【问题描述】：

如何在 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 组件？

【参考方案1】：

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

任何非名称的 props 都会被传递给渲染组件，但是大多数时候每个路由的数据都包含在路由的参数中。

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

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

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