如何通过Vue中的router-view将数据从主应用程序传递到组件.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组件?

推荐答案

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

任何非名称props 都将传递给渲染组件,但大多数情况下,每条路由的数据都包含在路由的参数中.

因此,如果您想从父组件而不是路由传递数据,应该是这样的:

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

然后,您的bookBus组件需要配置一个modelprops 来接收数据,就像其他props 一样.

Vue.js相关问答推荐

当props 的值改变时如何更新类'

如何以惯用的方式触发 vue3 中同级组件的效果?

在 Vuex 的状态下动态创建一个响应式数组

在keyup Vuejs 2上获取输入值

如何在 Laravel 中包含 Bootstrap-Vue

Vue 3 如何获取有关 $children 的信息

使用 Vue.js (cdn) 在特定元素上切换显示/隐藏

加载和渲染时对象值上的 Vue.js 未定义错误

导入没有 .vue 扩展名的 *.vue 文件时出现以下错误?

错误:[vuex] 期望字符串作为类型,但发现未定义

vuetify:以编程方式显示对话框

此 set-cookie 已被阻止,因为它具有 samesite=lax

取消选中单选按钮

如何从 vue.js 捕获 Jquery 事件

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

Vue - 如何在 v-if 或组件中使用窗口对象

如何让 vuetify 数据表在卡片内时跨越容器的整个宽度?

vuex - 即使不推荐,是否可以直接更改状态?

超过最大调用堆栈大小 Vuetify

在另一个 props 的验证器中访问 props 值