如何从Vue父组件获取子组件的meta属性？是否有更简便方法？

完全可行，不需要用emit，有两种更直接的方式：

1. 直接读取路由配置中的meta（最简便） #

你当前的代码已经在使用这种方式，路由配置里定义的meta可以通过this.$route.meta直接获取，这是Vue Router提供的原生能力，无需额外操作。

可以简化你的pagetitle计算属性：

computed: {
  pagetitle () {
    // 优先取路由meta的title，为空则返回空字符串
    return this.$route.meta.title || ''
  }
}

这种方式适合把路由相关的配置（比如标题、权限、全屏设置）统一放在路由文件中管理，切换路由时会自动更新$route.meta的值。

2. 通过router-view插槽获取子组件实例，读取组件自身的meta #

如果希望直接读取子组件选项中定义的meta（而非路由配置里的），可以利用Vue 3的router-view作用域插槽，获取当前渲染的子组件实例，进而访问组件的meta属性。

修改你的Default.vue代码：

<template>
  <h1>{{ pagetitle }}</h1>
  <!-- 通过v-slot获取子组件实例 -->
  <router-view v-slot="{ instance }">
    <component :is="instance?.type" />
  </router-view>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'LayoutDefault',
  
  computed: {
    pagetitle () {
      // 先取子组件自身的meta.title，没有则 fallback 到路由meta，最后兜底为空
      return this.$route.matched[0]?.instance?.$options.meta?.title || this.$route.meta.title || ''
    }
  }
})
</script>

或者用ref绑定组件的写法：

<template>
  <h1>{{ pagetitle }}</h1>
  <router-view v-slot="{ Component }">
    <component :is="Component" ref="childComponent" />
  </router-view>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'LayoutDefault',
  data() {
    return {
      childComponent: null
    }
  },
  computed: {
    pagetitle () {
      return this.childComponent?.$options.meta?.title || this.$route.meta.title || ''
    }
  }
})
</script>

这种方式的优势是保持组件的独立性，组件的配置信息不需要在路由中重复定义，适合组件可能被多个路由复用的场景。

内容的提问来源于stack exchange，提问作者aspirinemaga