Общий компонент Vue взаимодействует с другим родителем

У меня есть запрос, как насчет лучших практик общего компонента vue.js при общении с другим родительским компонентом.

например, в моем сценарии базовый модальный компонент запускает метод «закрыть», но у него есть два разных родительских компонента.

Я нахожу два решения:

  1. родитель должен передать дополнительную опору, а затем компонент baisc просто запускает событие, имя которого является значением опоры, поэтому можно вызвать подключенный родительский компонент слушателя.

  2. в базовом модальном просто используйте this.$parent для посещения методов родительского компонента или this.$parent.trigger('xxx'), и тогда родитель знает, что делать

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

Итак, есть ли лучшее решение в этом случае?


vue.js vue-component
person wsqviva    schedule 03.07.2016    source источник
comment
Я бы выбрал второй вариант, в любом случае, вы сказали a basic modal component, trigger a 'close' method, должен ли метод закрытия удерживаться самим модальным компонентом, а не родителем? или вы, вероятно, хотите вызвать закрытие другого элемента? Покажите свой код, чтобы я мог ясно понять это.   -  person Rifki    schedule 03.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Используйте this.$dispatch('eventName', data) (для Vue 2.x используйте this.$emit('eventName', data)), чтобы вызвать событие для любого родителя, дедушки и бабушки и выше по цепочке (вы можете использовать this.$broadcast('eventName', data) для запуска событий ниже по цепочке в Vue ‹ 2.x).

Если у родителя есть событие с именем 'eventName', оно запустит это событие.

Если у вас несколько родителей, вы можете дать каждому из них отдельное событие, а от дочернего элемента запустить это конкретное событие через диспетчеризацию. Вы также можете дать каждому родителю одно и то же событие и передать реквизит данных, который указывает, что родитель должен делать. Третий вариант - обратиться к конкретному родителю:

var parent = new Vue({ el: '#parent' })
// access child component instance
parent.$refs.eventName()

У каждого варианта есть плюсы и минусы. Лучшее решение зависит от контекста. Но я думаю, что лучшим решением в целом является вариант 1. Тогда вам не нужен дополнительный параметр данных. Вариант 3 не является слабосвязанным.

Для получения дополнительной информации: https://vuejs.org/guide/components.html

person Ron van Asseldonk    schedule 04.07.2016
comment
В Vue 2.0+ используйте this.$emit('eventName', data) для запуска родительского события, а не $dispatch - person Windo; 27.10.2016