Избегайте передачи свойств вложенным компонентам.
Условно когда есть такая структура
{
path: '/',
name: 'dashboard',
beforeEnter: guardIfNotAuthenticated,
component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue'),
props: () => ({
company: User.getAuthUser().company,
user: User.getAuthUser(),
}),
},
<template>
<DashboardCard
:company="company"
/>
</template>
<template>
<VacancyStoreButton link :company="company" />
</template>
<VacancyStoreDialog>
...
<RouterLink v-if="canStoreVacancies" :to="{ name: 'vacancy-store' }">
...
</VacancyStoreDialog>
<script>
export default {
{
computed: {
canStoreVacancies() {
return this.company.permissions.vacancyStore;
},
},
}
}
</script>
Если одни и те же данные нужны в больше чем одном компоненте, лучше использовать локальный или глобальный стейт - vuex, или composition api
Вот так гораздо лучше:
export default function useUser() {
return {
company: computed(() => User.getAuthUser().company)
}
}
export default function usePermissions() {
const {company} = useUser();
return {
canStoreVacancies: computed(() => company.value.permissions.vacancyStore),
}
}
<template>
<VacancyStoreDialog>
...
<RouterLink v-if="canStoreVacancies" :to="{ name: 'vacancy-store' }">
...
</VacancyStoreDialog>
</template>
<script>
export default {
name: 'VacancyStoreButton',
setup() {
const { canStoreVacancies } = usePermisions();
return {
canStoreVacancies,
}
}
}
</script>