Блог

Главная - Вопросы по программированию - Как получить доступ к методу для родителя от внука

Как получить доступ к методу для родителя от внука

#vue.js

Вопрос:

Я не знаю, как еще это назвать. У меня есть файл, давайте назовем его parent.vue. в нем есть следующее

РОДИТЕЛЬ.vue

 <template>
  <input-box
    :room="currentRoom"
    v-on:messagesent="getMessages"
    class="dark:bg-gray-800 px-6 pb-6 pt-4 dark:border-t-2 dark:border-gray-600 bottom-0 sticky" />
</template>
 
 method:
  getMessages() {
    axios.get('/chat/room/'   this.currentRoom.id   '/messages')
    .then(response => {
      this.messages = response.data;
    })
    .catch(error => {
      console.log(error);
    })
  },

Затем у меня есть ребенок, который звонит v-on в любое время, когда что-то происходит. Проблема в том, что мне нужно назвать это от ребенка внутри ребенка. «он же внук» Внутри РЕБЕНКА, которого я имею внутри метода

 this.$emit('messagesent');

Как я могу сделать то же самое внутри внука?

Ответ №1:

Что ж, это был пустой момент с моей стороны.

С помощью

 this.$parent.$emit()

Дал мне возможность отправить его по цепочке. Это именно то, чего я хотел.

Ответ №2:

Нет, если вы хотите сохранить инкапсуляцию. Бабушка и дедушка не должны знать о внуке. Он знает о родителе, но не о том, что есть подкомпоненты или сколько их. В принципе, вы можете поменять одну реализацию дедушки и бабушки на другую, у которой нет нескольких слоев. Или имеет еще больше слоев, чтобы добраться до ребенка. И вы могли бы поместить ребенка в компонент верхнего уровня.

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

Это отличает компоненты верхнего уровня от подкомпонентов: подкомпонент получит поддержку шины для выполнения функций компонента верхнего уровня, которые он помогает реализовать. Компонент верхнего уровня создаст шину.

Для получения более подробной информации перейдите по ссылке ниже

https://andrejsabrickis.medium.com/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

Комментарии:

1. В данном конкретном случае я использую модал, который появляется для добавления данных к ребенку. поэтому я меньше беспокоюсь об инкапсуляции. Когда я завершу свой MVP и рефакторинг некоторых компонентов, я вернусь к этому, но пока это достигает моей цели

2. Это было просто для вашей информации, все, что я хотел подчеркнуть, это то, что, когда иерархия выходит за рамки одного уровня, лучше использовать шину событий

Метки: