Объясните мне пожалуйста, зачем мне нужно использовать $emit во VUE, писать кучу усложняющего кода, если я просто могу написать метод меняющий состояние родительского компонента и передать его в пропсах в дочерний компонент?
Eсли я использую $emit(это 6 действий и куча кода):
- я должен создать метод меняющий состояние в родителе
toggleFavoriteStatus(friendId) { const identifiedFriend = this.friends.find((friend) => friend.id===friendId); identifiedFriend.isFavorite = !identifiedFriend.isFavorite; },
- передать его в событие в дочерний компонент шаблоне родителя
<friend-contact v-for="friend in friends" :id="friend.id" @toggle-favorite="toggleFavoriteStatus"> </friend-contact>
- создать метод в дочернем компоненте
- подписать его через $emit в этом методе
methods: { toggleIsFavorite() { this.$emit("toggle-favorite", this.id); }, },
- вызвать его в шаблоне дочернего компонента
<button @click="toggleIsFavorite">Is Favorite</button>
- еще и экспортировать в поле emits
emits:["toggle-favorite"]
Если я просто передаю метод в пропсах (4 действия и все понятно и наглядно)
- я делаю метод меняющий состояние в родителе
toggleFavoriteStatus(id) { const identifiedFriend = this.friends.find((friend) => friend.id === id); identifiedFriend.isFavorite = !identifiedFriend.isFavorite; },
- передаю его в пропсах в дочерний шаблон
<friend-contact v-for="friend in friends" :id="friend.id" :is-favorite="toggleFavoriteStatus"> </friend-contact>
- принимаю его в пропсах в компоненте
props: { id: { type: String, required: true, }, isFaforite: { type: Function, required: true, }, },
- и просто вызываю по клику в шаблоне передав нужные данные как агрумент функции
<button @click="isFavorite(id)">Favorite</button>
Зачем мне все усложнять, если я могу сделать все проще и получить тот же результат? Может я чего то не понял?