Наличие кнопки на дочернем компоненте запускает функцию на родительском

Question

Я в настоящее время застрял с простой на вид проблемой, но не могу найти wording.technicality для ее решения.

По сути, у меня есть дочерняя "карточка проекта", эта карта отображается на моей домашней странице с помощью

<div v-for="(project, index) in projects" :key="index">

(извлекается из массива, называемого «проекты», который содержит объекты).

В любом случае, моя проблема в том, что у меня есть кнопка на компоненте «карточка проекта», и я нажимаю на что я хотел бы запустить функцию на «домашней» странице. (как кажется, имеет смысл управлять массивом оттуда).

Но как мне это сделать? Как заставить кнопку, нажатую на дочернем компоненте, запускать функцию на родительском компоненте?

Answer 1

Вам нужно это в вашем дочернем компоненте:

this.$emit('myEvent')

Затем вы можете сделать на своем родительском компоненте:

<my-parent-component v-on:myEvent="doSomething"></my-parent-component>

Вы можете прочитать о событиях обстрела в https://vuejs.org/v2/guide/components-custom-events.html. Если это простой случай, тогда лучше использовать генерацию событий. Но в других случаях лучшим решением является использование vuex.