Как переиспользовать компоненты Vue?

Question

[sir_pounce]

К примеру, есть у нас компонент таблицы, в шапке которой есть кнопка добавления элемента. В приложении этих таблиц несколько, каждая, при добавлении нового элемента через кнопку, должна добавлять этот элемент через разные методы api в разные таблицы бд. Можно ли такое реализовать и как?

Answer 1

[coderisimo]

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

Answer 2

[Антон Антон]

Передать в компонент в качестве props функцию, которая должна вызываться по нажатию на кнопку/завершению редактирования строки.
Можно вместо непосредственной записи в компоненте вызывать событие, а его уже обрабатывать в том месте, куда вставлен компонент.

Comments

[Kitta]

По моему второй вариант, предложенный Антон Антон чуть больше в стиле vue.

Посмотрите кто у вас владеет (добыл и хранит) данными, скорее всего это кто-то выше по иерархии, а не сами таблицы. Кто данными владеет, тот их и изменяет. Запускайте из таблицы событие добавления с нужными данными и поднимайте его до владельца. Он как-то смог раньше данные достать, он же должен их и изменить (а потом изменения обратно вниз спустить). Работа с данными будет в одном месте и компонент таблиц будет попроще (а эти компоненты обычно и без того не простые).