Access the parent component of the DOM of a child component about js-toolkit HOT 1 CLOSED

This seems to be complicated to implement at the moment, as the components are mounted from the top down. This means that if a component is defined in App, it will be mounted when App is mounted, and it will then mount its children, etc.

It would also be complex to add a $parentDom property that resolves correctly because the selector for a component can be changed to a specific selector other than [data-component="..."].

But, it is possible with the current API to achieve what you are trying to do by registering the Hero class as a component of the HeroSlider one, but with a different name. This way, App will not instantiate the components inside HeroSlider.

See this Codepen for a live demo : https://codepen.io/titouanmathis/pen/yLgqBVv?editors=0001.

You will then be able to trigger custom behavior if needed :

if (this.$parent instanceof HeroSlider) {
  // do something with the parent component
}

To avoid complexity in the Hero class with conditions (and a cyclic import), I'd rather suggest to use events from the Hero class which could be listened by the HeroSlider class:

class Hero extends Base {
  mounted() {
    this.$emit('event', 'foo');
  }
}

class HeroSlider extends Base {
  static config = {
    name: 'HeroSlider',
    components: { Hero },
  }

  onHeroEvent(value) {
    console.log(value); // 'foo'
  }
}

from js-toolkit.