Sobes.tech
Назад к вопросам
Senior
5

Как из родительского компонента вызвать метод дочернего компонента во Vue.js?

Компании, где спрашивали
АЛМИ Партнер

Ответ от нейросети

sobes.tech AI

В Vue.js (версии 2 и 3) для вызова метода дочернего компонента из родительского можно использовать ссылку на компонент через ref.

Пример:

<!-- Родительский компонент -->
<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Вызвать метод дочернего</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.child.someMethod();
    }
  }
}
</script>

<!-- Дочерний компонент -->
<template>
  <div>Дочерний компонент</div>
</template>

<script>
export default {
  methods: {
    someMethod() {
      console.log('Метод дочернего компонента вызван');
    }
  }
}
</script>

Объяснение:

  • В родительском шаблоне у дочернего компонента указывается атрибут ref.
  • В методах родителя через this.$refs.child можно получить ссылку на экземпляр дочернего компонента.
  • После этого вызывается нужный метод дочернего компонента.

Важно: ref доступен только после монтирования компонента, поэтому вызов должен происходить после этого (например, в обработчике события или в mounted).