Задать вопрос
motto13
@motto13
Вечно молодой

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

Переписываю данный скрипт 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
  • Вопрос задан
  • 419 просмотров
Подписаться 1 Простой 1 комментарий
Решение пользователя Владимир Римидалв К ответам на вопрос (2)
pickHabr
@pickHabr
Костыльных дел мастер
Из дочернего объекта можно вызвать родительский через $emit.
В родительском компоненте надо прописать
<daughter-component
     @nextStep="nextStep"
></daughter-component>


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


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