How to get a specific child component object property from parent component?

Question

I would like to grab a child component's "meta" property from parent. Is it possible somehow ?

I know there is a solution with an emit method, but is there some easier way to make it happen ?

// 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>

Eyal · Accepted Answer · 2023-02-11T17:33:32.110

You can get component info via $route.matched.

Here's a PoC:

const Dashboard = Vue.defineComponent({
  template: "<div>Some dashboard</div>",
  meta: { title: "Dashboard" },
})

const router = new VueRouter({
  routes: [{ path: "/", component: Dashboard }],
})

const app = new Vue({
  router,

  computed: {
    // Note that this takes the *last* matched component, since there could be a multiple ones
    childComponent: (vm) => vm.$route.matched.at(-1).components.default,
  },
}).$mount('#app')

<div id="app">
  <h1>{{ childComponent.meta.title }}</h1>
  <router-view />
</div>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

As suggested by Estus Flash in a comment, instead of taking the last matched component we can take the last matched component that has meta defined. To do that, replace the following:

vm.$route.matched.at(-1).components.default

with:

vm.$route.matched.findLast((r) => "meta" in r.components.default)
    .components.default

I'd get the last `components.default` that has `meta`, but should work the same here. Otherwise, that's it — Estus Flask, Feb 11 '23 at 17:25
@EstusFlask Added a variation of the solution to support your suggestion. — Eyal, Feb 11 '23 at 17:33

score 0 · Answer 2 · answered Feb 11 '23 at 16:51

0

Some approaches I could figure from the web:

Using ref by this.$refs.REF_NAME.$data (As done here: https://stackoverflow.com/a/63872783/16045352)
Vuex or duplicating the logic behind stores (As done here: https://stackoverflow.com/a/40411389/16045352)

Source: VueJS access child component's data from parent

answered Feb 11 '23 at 16:51

Aahan Agarwal

391
2
6

metadata is located in comp definition, not instance data – Estus Flask Feb 11 '23 at 16:53
I forgot to mention that right now it works with Vuex approach, but I tought maybe there is a better way instead. Thanks for info, I'll check 1st variant – aspirinemaga Feb 11 '23 at 17:02

How to get a specific child component object property from parent component?

2 Answers2