Vue 3 Composition API как обратиться к функции через this.$refs?

Question

[Виктор]

Переписываю данный скрипт https://github.com/yogeshgalav/vue-multi-step-form... в Vue 3 Composition API.
В данном репозитории есть такой пример:
в шаблоне вызов компонента

<vue-multi-step-form
    id="myWizard"
    name="myWizard"
    ref="myWizard"
    :step-data="stepData"
    @valdiateStep="valdiateStep"
    @onComplete="onComplete"
 >

в script

methods:{
    valdiateStep(currentStepIndex){
        //validate your current step here
        //if current step is valid set step_valid 
        this.stepData[currentStepIndex].step_valid = true;
        //move to next step 
        this.$refs.myWizard.nextStep();
        //next step will keep emiting validateStep until step_valid is true
    },
}

Как обратиться к функции nextStep() на Vue 3 Composition API?
this.$refs.myWizard.nextStep();

я пробовал так:

const myWizard = ref(null);

function validateStep(currentStepIndex){
      console.log(myWizard.value)
      myWizard.value.nextStep()
	  //myWizard.nextStep()
}

и получаю ошибку myWizard.value.nextStep is not a function

Comments

[Aetae]

Не знаю что у тебя не работает, у меня всё в порядке.

Возможно ты используешь <script setup>? Тогда тебе нужно будет использовать defineExpose, чтобы сделать доступными методы извне.

Answer 1

[Андрей]

Чтобы напрямую вызывать методы инстанса компонента, нужно методы сделать публичными. Для этого есть expose в Options API и defineExpose для Composition API

Child.vue

<script setup>
const foo = ref('foo')
const bar = () => console.log('bar')

defineExpose({
  foo,
  bar,
})
</script>

Parent.vue

<template>
  <Child ref="child" />
</template>

<script setup>
const child = ref(null);

onMounted(() => {
  console.log(child.value.foo)
  console.log(child.value.bar())
})
</script>

Т. е. без доработок код из этого репозитория не заработает

Answer 2

[Владимир Римидалв]

Из дочернего объекта можно вызвать родительский через $emit.
В родительском компоненте надо прописать

<daughter-component
     @nextStep="nextStep"
></daughter-component>

В дочернем компоненте

valdiateStep(currentStepIndex){
    this.$emit('nextStep'); // если надо передать параметр то this.$emit('nextStep', param); 
}

Если компоненты не связаны как родитель-ребенок то есть смысл покопать в сторону vue event bus и Шина событий

Comments

[Юрий]

...но если вы на 100% уверены, что вам обязательно нужно вызвать метод дочернего компонента из родителя, и без этого вообще никак, категорически, не обойтись, есть defineExpose.

В дочернем компоненте делаете defineExpose({ nextStep }), в родителе вызываете его так же через myWizard.value.nextStep().

[Виктор]

Юрий, Спасибо, как раз читал как использовать defineExpose()