Vue: Get method from component that is in scoped slot

Viewed 63

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?
}
...
1 Answers

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.

Related