我想从父组件中获取一个子组件的"meta"属性,这可能吗?
我知道有一个使用emit
方法的解决方案,但是有没有更简单的方法来实现它呢?
// Default.vue <-- parent component
<template>
<h1>{{ pagetitle }}</h1>
<router-view />
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'LayoutDefault',
computed: {
pagetitle () {
let title = this.$route.meta.title // <--- I want to access child's component meta here
// if title not provided, set to empty string
if (!title) title = ''
return title
}
}
})
</script>
// router/routes.js
const routes = [
{
path: '/',
component: () => import('layouts/Default.vue'),
children: [
{
path: 'dashboard',
name: 'dashboard',
meta: { title: 'Dashboard', auth: true, fullscreen: false }, // <--- TAKE THIS
component: () => import('pages/dashboard.vue')
}
]
}
]
// pages/dashboard.vue <-- child component
<template>
<div>
dashboard content
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Dashboard',
meta: { // <--- this should be reachable from the parent component (Default.vue)
title: 'Dashboard',
auth: true,
fullscreen: false
}
})
</script>
2条答案
按热度按时间0x6upsns1#
您可以通过
$route.matched
获取组件信息。下面是一个PoC:
正如Estus Flash在注解中所建议的,我们可以使用定义了
meta
* 的最后一个匹配的组件 *,而不是最后一个匹配的组件。与:
carvr3hs2#
我可以从网上找到一些方法:
1.按
this.$refs.REF_NAME.$data
使用ref
(如下所示:https://stackoverflow.com/a/63872783/16045352)Vuex
或复制存储背后的逻辑(如下所示:https://stackoverflow.com/a/40411389/16045352)