I'm trying to establish a reference from a child to a component in it's parent element. I would expect to be able to reference it by calling this.el.parentEl.components['parent'] in the init() function, but this returns undefined.
Other test cases work fine: 1. Referencing the child component from the parent works fine from within the parent component. 2. Referencing the parent component from a code snippet below the html. 3. Referencing the parent component from the child element from a code snippet below the html.
Is this an issue of life cycle? Why is there a difference between child and parent in this case?
<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
<script>
AFRAME.registerComponent('parent', {
multiple: false,
init: function () {
this.child = this.el.children[0].components['child']
console.log("child component: ", this.child); //This works
}
})
AFRAME.registerComponent('child', {
multiple: false,
init: function () {
this.parent = this.el.parentEl.components['parent']
console.log("parent component: ", this.parent); //Undefined
}
})
</script>
<a-scene>
<a-entity parent>
<a-entity child></a-entity>
</a-entity>
</a-scene>
<script>
var parent = document.querySelector('[parent]').components.parent
console.log("parent component from below: ", parent); //This works
var parentfromchild = document.querySelector('[child]').parentEl.components['parent']
console.log("parent from child from below: ", parentfromchild); //This works
</script>
