Can you bind prop to childcomponent with router-view? (vue)

Question

I have three Views that depend on data from the parent but I never want to show a view from more than one of these children.

Parent

Fetch Api and manipulate the data. Store it as an array of objects in the data( ) object. Containers role is to fetch api on created() and act as a parent to the views. Data is shared with children. And header is imported as a component. The Children Components is rendered in the in router-views. The data is stored in array of objects, userData[]

Childcomponent 1 .

path: /#/user

Needs userData[], to spit out content of users. You can click on a user, then you go to childcomponent2

childcomponent 2.

path: /#/user:id Show specific userdata. Needs the userData[] array of objects.

childcomponent 3.

path: /#/user:id/list/:id

Show specific data of a list that a user has, needs userData[] for name and info of the user, and also make a new API-call for to get the list-items

Or what is the best architecture to set this up?

<template>
  <div>
    <UserView :listdata="item" v-if="bool" />
<ListView :listdata="item" v-if="bool" />
    <router-view></router-view>
  </div>
</template>

One other thing I thought of was to set a v-if="boolean" to display different views of it´s not possible to have children use prop of you just use the router-view and set them as children there,

export default [
  {
    path: "/",
    component: TheContainer,
    children: [{ path: "/user", component: UserView }, 
    { path: "/user/:id", component: ListView }],
  },
];

Decade Moon Decade Moon · Accepted Answer · 2021-02-27T23:04:50

You can bind props to the <router-view> which get forwarded to the child component it renders.

<router-view :userdata="whatever">

Otherwise for more complicated tasks, you might need a global shared state (e.g. Vuex).

Can you bind prop to childcomponent with router-view? (vue)

Parent

1 Answers