How to link components and access data. In the project I use vue-route. The structure is such

component

a.vue

b.vue

c.vue

app.vue

main.js

I use es6 to bind

import Vue from 'vue' import VueRouter from 'vue-router' import app from './app.vue'

app.vue gets data to which you need to have access to other components. According to the documentation, access to them must be obtained through props What I'm trying to do. The app.vue component displays part of the template and receives data. The a.vue component is accessible via the route '/' connect the app.vue component to a.vue to access its data .

 import app from './../app.vue'; export default { component: { app }, props: ['item', 'settings'] }

But in props I have undefined . In app.vue data comes in and there is data in place. I have a suspicion that I do not correctly bind the components, and a.vue does not know where to get the data.

Ps I hope I was able to state the essence of the problem.

1 answer 1

For es6 for some reason, the usual approach to getting props does not work. I came across this problem, unfortunately, I found nothing better than transferring data directly to a component. Transfer example

 <router-view :item="item" :settings="settings"></router-view>

To do import app.vue and a.vue in this case there is no need, the router has already connected them. Similar questions and answers are better to look for on the official forum vue js . If you find a solution with the usual approach or with any other, write it, and then it is annoying to transfer to the template.