Вызов функций в дочернем компоненте из родителя в Vue 2.0

Быстрый ответ

По своей сути задача сводится к тому, чтобы присвоить ref дочернему компоненту и обращаться к его методам напрямую из родительского объекта, используя эту ссылку.

<!-- Родительский компонент -->
<template>
  <Child ref="childRef" />
  <button @click="invokeChild">Активировать метод дочернего компонента</button>
</template>

<script>
import { ref } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const childRef = ref(null);

    const invokeChild = () => {
      if (childRef.value) {
        childRef.value.childMethod();
      }
    };

    return {
      childRef,
      invokeChild,
    };
  },
};
</script>

Далее представлен пример дочернего компонента:

<!-- Дочерний компонент -->
<script setup>
import { defineExpose } from 'vue';

const childMethod = () => console.log('Функция дочернего компонента исполнена!');
defineExpose({ childMethod });
</script>

Родительский компонент теперь способен активировать childMethod() дочернего компонента при каждом клике на кнопку. Таким образом, дочерний компонент всегда готов к взаимодействию!🔊

Подробное рассмотрение vue refs

Не ограничивайтесь базовыми знаниями, ведь делимся мы знаниями для того, чтобы умножать их. Давайте изучим различные способы использования vue refs, которые позволяют активировать функции дочерних компонентов из родительского.

Доступ к методам компонента через $refs

В Vue 2 и при использовании Options API в Vue 3, this.$refs позволяют активировать методы дочернего компонента. Присвойте атрибут ref.

export default {
  methods: {
    parentFunction() {
      this.$refs.childRef.childFunction();
    }
  }
}

Реактивные пропсы для активации функций дочернего компонента

Пропсы могут служить стартовым толчком для запуска методов дочернего компонента. Как только родитель изменил значение пропа, дочерний компонент может реагировать на это.

<template>
  <Child :some-prop="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: 'Привет, наслаждайся новыми данными!'
    };
  }
}
</script>

Дочерний компонент реагирует следующим образом:

<script>
export default {
  props: ['someProp'],
  watch: {
    someProp(newValue) {
      this.childAction(newValue);
    }
  },
  methods: {
    childAction(propValue) {
      // Что нового принёс родитель?💢
    }
  }
}
</script>

Применение шины событий для коммуникации

Шина событий в настоящее время является устаревшей, но отлично демонстрирует, как с помощью Vue реализуется взаимодействие между родительскими и дочерними компонентами.

Публичные методы с помощью defineExpose в Composition API

Во Vue 3 и Composition API публичные методы определяются через defineExpose.

Взаимодействие с использованием $emit и $on

Система событий Vue позволяет дочерним компонентам инициировать события, а родительским управлять их исполнением.

Паттерны коммуникации

Обратим внимание на различные подходы к улучшению взаимодействия между родительскими и дочерними компонентами, помогающие избежать хаоса.

Централизованное управление состоянием с помощью Vuex

В сложных случаях, особенно в крупных приложениях, Vuex представляет собой централизованный подход к управлению состоянием.

Гибкое управление с помощью слотов в компонентах

Слоты в компонентах предлагают более широкие возможности для гибкого взаимодействия, нежели прямой вызов методов дочернего компонента.

Магия реактивных пропсов

Декларативное использование реактивных пропсов раскрывает новые грани программирования.

Визуализация

Давайте сравним взаимодействие между родительским и дочерними компонентами с радиосвязью:

Родительский компонент (👩‍💼): Мне требуется дать инструкции дочернему компоненту (👶).

Родитель использует радиостанцию, аналог ref.

const childRef = ref(null);

У родителя происходит событие:

const onParentEvent = () => {
  if(childRef.value) {
    childRef.value.childSpecificMethod();
  }
};

Дочерний компонент (👶): Приказ понят и будет исполнен!

Таким образом, задача родителя успешно выполнена!

Сигнал родителя (👩‍💼📞): Инструкция передана.
Действие дочернего компонента (👶🏃): Метод исполнен.