Для вызова функции из одного дочернего компонента в родителе, вы можете использовать событийную систему Vue.js. Событийная система позволяет вам эмитить событие из одного компонента и слушать его в другом компоненте.
Чтобы вызвать функцию в родительском компоненте, первым шагом является создание обработчика события в родительском компоненте. Обработчик должен быть добавлен в секцию methods вашего родительского компонента. Например:
// Родительский компонент
<template>
<div>
<child-component-one @my-event="myEventHandler"></child-component-one>
<child-component-two></child-component-two>
</div>
</template>
<script>
import ChildComponentOne from './ChildComponentOne.vue';
import ChildComponentTwo from './ChildComponentTwo.vue';
export default {
components: {
ChildComponentOne,
ChildComponentTwo
},
methods: {
myEventHandler(data) {
// Обработка события и вызов нужной функции
console.log(data);
}
}
};
</script>
Затем нам понадобится дочерний компонент, который будет эмитить событие. Для этого мы используем метод $emit(). Например:
// Дочерний компонент 1
<template>
<button @click="emitEvent">Нажми меня</button>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('my-event', 'Some data');
}
}
};
</script>
В этом примере при клике на кнопку в дочернем компоненте будет вызываться метод emitEvent(), который с помощью $emit() эмитит событие my-event со строковым параметром Some data.
Наконец, нам нужно добавить слушатель события в другом дочернем компоненте, чтобы вызвать функцию в родительском компоненте. Например:
// Дочерний компонент 2
<script>
export default {
mounted() {
this.$parent.$on('my-event', this.myFunction);
},
methods: {
myFunction(data) {
// Обработка события и вызов нужной функции в родительском компоненте
console.log(data);
}
},
beforeDestroy() {
this.$parent.$off('my-event', this.myFunction);
}
};
</script>
В этом примере мы добавляем слушатель события в хуке mounted() и удаляем его в beforeDestroy() для избежания возможных утечек памяти.
Теперь, когда мы кликаем на кнопку в дочернем компоненте 1, будет вызван метод myEventHandler() в родительском компоненте, который был определен ранее. Это позволяет нам вызывать функцию из одного дочернего компонента в родителе с помощью событийной системы Vue.js.