CODEWITHSUNDEEP
javascriptvue.jsvue-router
aspirinemaga
aspirinemaga

Reputation: 3937

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

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>

Upvotes: 0

Views: 75

Answers (2)

Eyal
Eyal

Reputation: 1709

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

Upvotes: 2

Aahan Agarwal
Aahan Agarwal

Reputation: 427

Some approaches I could figure from the web:

  1. Using ref by this.$refs.REF_NAME.$data (As done here: https://stackoverflow.com/a/63872783/16045352)

  2. 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

Upvotes: 0

Related Questions