I need a reliable way to call the a parent ponent of n parents in vuejs. Looking for something more like closest('element') in jQuery where you don't have to specify how many parents or children there are, you only give it the name of the ponent you need and it will look it up for you recursivly untill it finds the right one.

I just wonder if there is something like: this.$find(ponent-name); or this.$closest(ponent-name);

I have read somewhere people are using $ref, but I don't think that's the right one for this use-case or is it ?

Instead of this.$parent.$parent which is obviously not very reliable, when you don't know how many parents there are.

Thanks,

I need a reliable way to call the a parent ponent of n parents in vuejs. Looking for something more like closest('element') in jQuery where you don't have to specify how many parents or children there are, you only give it the name of the ponent you need and it will look it up for you recursivly untill it finds the right one.

I just wonder if there is something like: this.$find(ponent-name); or this.$closest(ponent-name);

I have read somewhere people are using $ref, but I don't think that's the right one for this use-case or is it ?

Instead of this.$parent.$parent which is obviously not very reliable, when you don't know how many parents there are.

Thanks,

• javascript
• vue.js

Share Improve this question Follow asked Oct 8, 2018 at 18:47 Eden ReichEden Reich 38722 silver badges88 bronze badges 2

• 2 This'll not be a very satisfying answer, but you probably ought to use either an event bus or a shared data store instead. – Daniel Beck Commented Oct 8, 2018 at 18:52
• @DanielBeck thanks for the resources! I will take a look :) – Eden Reich Commented Oct 8, 2018 at 19:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 16

You could use a while loop, iterating over all the parent ponents.

getComponent(ponentName) {
  let ponent = null
  let parent = this.$parent
  while (parent && !ponent) {
    if (parent.$options.name === ponentName) {
      ponent = parent
    }
    parent = parent.$parent
  }
  return ponent
},

Example:

mounted() {
  console.log(this.getComponent('App'))
},

---

Utility function (TS):

import Vue from 'vue'

/**
 * @name findParentComponentByName
 * @summary Find the Vue instance of the first parent ponent that matches the provided ponent name.
 *
 * @description The `findParentComponentByName()` method returns the Vue instance of the first parent ponent
 * that has a `name` ponent option that matches the provided ponent name.
 *
 * @param {Vue} vm - The children ponent Vue instance that is looking for the parent ponent Vue instance
 * @param {string} ponentName - The parent ponent name
 * @returns {Vue|undefined} The parent ponent instance that matches the provided ponent name,
 * otherwise, undefined is returned
 *
 * @example
 * // Find `<App/>` ponent from `<Child/>`:
 * <App>
 *   <GrandParent>
 *     <Parent>
 *       <Child/>
 *     </Parent>
 *   </GrandParent>
 * </App>
 *
 * // Descendant ponent Vue instance
 * new Vue({
 *   name: 'Child',
 *
 *   created() {
 *     const app = findParentComponentByName(this, 'App')
 *     // => VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
 *  },
 * })
 */
export function findParentComponentByName(
  vm: Vue,
  ponentName: string
): Vue | undefined {
  //
  //  Components tree:
  //  +---------------------+  \ return undefined, , <Child/> is not a descendant of <App/> \
  //  | <App>               |---> Return if ponent name option matches, otherwise
  //  |---------------------|    \ continue traversing the tree upwards \
  //  |   <GrandParent>     |-----> Return if ponent name option matches, otherwise
  //  |---------------------|      \ continue traversing the tree upwards \
  //  |     <Parent>        |-------> Return if ponent name option matches, otherwise
  //  |---------------------|        \ traverse the tree upwards \
  //  |       <Child/>      |---------> STARTING POINT, start looking for App ponent from here
  //  |---------------------|
  //  |     </Parent>       |
  //  |---------------------|
  //  |   </GrandParent>    |
  //  |---------------------|
  //  | </App>              |
  //  +---------------------+
  //

  let ponent: Vue | undefined
  let parent = vm.$parent

  while (parent && !ponent) {
    if (parent.$options.name === ponentName) {
      ponent = parent
    }
    parent = parent.$parent
  }

  return ponent
}

Example:

// In consuming ponent
import { findParentComponentByName } from '@/utils'

// ...

mounted() {
  console.log(findParentComponentByName(this, 'App'))
},