Чтобы вызвать метод дочернего компонента из родительского компонента в Vue.js, вы можете использовать передачу событий или ссылки на компоненты. Вот пример использования ссылок на компоненты:

Родительский компонент:

<template>
  <div>
    <button @click="callChildMethod">Call Child Method</button>
    <child-component ref="childRef"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      // Access the child component instance using $refs
      this.$refs.childRef.childMethod();
    }
  }
};
</script>Code language: JavaScript (javascript)

Дочерний компонент:

<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called from parent');
      // Add your child component logic here
    }
  }
};
</script>Code language: JavaScript (javascript)

В родительский компонент дочерний компонент включается с помощью тега  и ему присваивается ссылка с помощью атрибута ref (ref= "childRef"). Внутри метода callChildMethod родительского компонента this.$refs.childRef используется для доступа к экземпляру дочернего компонента, а затем к дочернему методу (childMethod()). в этом примере).

Используя ссылки на компоненты ($refs), вы можете напрямую получить доступ к методам и свойствам дочернего компонента из родительского компонента.

Вот пример использования $emit:

Родительский компонент:

<template>
  <div>
    <button @click="callChildMethod">Call Child Method</button>
    <child-component @custom-event="handleChildEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.$emit('custom-event', 'Hello from parent!');
    },
    handleChildEvent(payload) {
      console.log('Event received from child: ', payload);
      // Handle the event in the parent component
    }
  }
};
</script>Code language: JavaScript (javascript)

Дочерний компонент:

<template>
  <div>
    <p>Child Component</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello from child!');
  }
};
</script>Code language: JavaScript (javascript)

Использование $emit позволяет запускать пользовательские события в дочернем компоненте и обрабатывать их в родительском компоненте.

Ссылка: https://vuejs.org/guide/comComponents/events.html#event-arguments