2

Объясните мне пожалуйста, зачем мне нужно использовать $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>
    

Зачем мне все усложнять, если я могу сделать все проще и получить тот же результат? Может я чего то не понял?

2
  • Потому что у Вас событие может быть вызвано в зависимости от состояния. Не только по стандартным событиям типа клика или ховера. Кнопка на изменение фаворита если внутри, то Вы и не вызовете никак Ваш метод на изменение. Если снаружи - эмиты вам и не нужны. 7 июн 2022 в 7:27
  • Всё сильно зависит от изолированности компонентов. Если Вы будете несколько раз эти фавориты использовать - ну и будете везде логику однотипную плодить. Не по DRY это как-то... 7 июн 2022 в 7:28

1 ответ 1

0

Судя по треду в междунарождной версии, это просто удобне для реализации библиотек, плюс имеется пара обобых кейсов:

https://stackoverflow.com/a/52677402/11568337

1
  • добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 7 июн 2022 в 7:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.