如何在Vue.js中将数据传递到路由器视图 | 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

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

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

推荐答案

来自

因此，如果要从父组件而不是从父组件向下传递数据路由器，可能是这样的：

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中将数据传递到路由器视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！