Component Page:
...
<Child>
<template #form="{ init }">
<PageForm :init="init"/>
...
Component PageForm:
...
methods: {
getData() {
// i need to call in component-grandchild of Page-component
}
}
...
Component Child (render-function):
...
h('GrandChild', {scopedSlots: {form = props => h('div', this.$scopedSlots.form(props)}}
...
Component GrandChild:
template:
...
<div>
<slot name="form" :init="init">
<div>
...
script:
...
mounted: {
// how here get method getData from Page->PageForm without Vuex?
}
...
I understand that if the structure of the components is constant, then you can try this.$parent.$parent. But this way you can get to the Page, but inside the PageForm is problematic, because this is the slot area.
In theory, i can hang a ref on a component, and get a method through it, but the behavior there is unpredictable...
It is most correct to exchange data through props/emit if the components are adjacent.