Как вывести функцию из одного компонента в другом?

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

Вот несколько способов, которые можно применить:

1. События и обработчики событий: В этом случае, вы можете определить событие в одном компоненте и затем слушать его в другом компоненте. При необходимости, можно передать данные вместе с событием. Вот пример:

В компоненте, из которого нужно вывести функцию:

methods: {
  handleClick() {
    this.$emit('custom-event', data);
  }
}

В компоненте, в который нужно передать функцию:

<template>
  <div>
    <button @click="$emit('custom-event', data)">Кнопка</button>
  </div>
</template>

2. Прокси-свойства: Вы можете создать прокси-свойство в родительском компоненте и передать его в дочерний компонент как пропс. Затем, вы можете вызвать эту функцию в дочернем компоненте через прокси-свойство. Вот пример:

В компоненте, из которого нужно вывести функцию:

methods: {
  handleClick() {
    this.$refs.childComponent.myFunction();
  }
}

В компоненте, в который нужно передать функцию:

<template>
  <div>
    <child-component ref="childComponent" :custom-fn="myFunction"></child-component>
  </div>
</template>

В скрипте дочернего компонента:

export default {
  props: ['customFn'],
  methods: {
    myFunction() {
      this.customFn();
    }
  }
}

3. Использование глобального хранилища: Если у вас есть глобальное хранилище (например, Vuex), вы можете сохранить функцию в хранилище и получить ее в другом компоненте через геттеры. Вот пример:

В компоненте, из которого нужно вывести функцию:

methods: {
  handleClick() {
    this.$store.commit('setFunction', myFunction);
  }
}

В компоненте, в который нужно передать функцию:

<template>
  <div>
    <button @click="customFn">Кнопка</button>
  </div>
</template>

В скрипте компонента:

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['customFn'])
  }
}

В геттере глобального хранилища:

import { GetterTree } from 'vuex';

export const getters: GetterTree<State, RootState> = {
  customFn: state => state.customFn
}

В мутации глобального хранилища:

import { MutationTree } from 'vuex';

export const mutations: MutationTree<State> = {
  setFunction(state, fn) {
    state.customFn = fn;
  }
}

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