Обмен сообщениями компонента Vue.js, продолжение
danholloran.me
Итак, вчера я написал об обмене сообщениями компонентов Vue.js. Это в некотором роде продолжение, так что вам захочется прочитать первую Обмен сообщениями компонентов Vue.js.
Я предположил, что запуск события общего элемента, будь то тело или основной экземпляр Vue.js, на самом деле не имеет значения. Однако я как бы задумался об этом, и это сработало бы, но может возникнуть проблема, если на одной странице есть несколько экземпляров одного и того же компонента. В примере с компонентом оповещения, если по какой-то причине один компонент оповещения находится в заголовке, а другой — в нижнем колонтитуле, предупреждающее сообщение будет добавлено к обоим.
У меня была идея, которая, как я думал, может решить эту проблему, разрешив что-то вроде свойства компонента события. Независимо от того, передаете ли вы ему полное значение или, может быть, просто суффикс. По умолчанию это может быть имя-события, и если вы передадите его имя-события-2, то это событие сработает при передаче тех же данных, что и имя-события. В качестве суффикса, возможно, вы могли бы передать my-custom-suffix, и тогда событие, которое будет запущено, будет чем-то вроде event-name/my-custom-suffix.
// Full event <alert :messages.sync="messages" :event="event-name-2" ></alert> // Event suffix <alert :messages.sync="messages" :event-suffix="event-name-2" ></alert>
Затем вы можете прослушивать событие, следуя примеру, который я использовал в предыдущем посте, используя предложенные вспомогательные функции. Однако не стесняйтесь слушать эти события, поскольку здесь не происходит ничего волшебного.
// In component 1 (full event)
componentFireEvent('event-name-2', 'event-details');
// In component 2 (full event)
// this.even = 'event-name-2'
componentSubscribe(this.event, function( eventDetails ) {
// Do whatever you need to do now.
});
// In component 1 (event suffix)
componentFireEvent('event-name-2', 'event-details');
// In component 2 (event suffix)
// this.even = 'event-name-2'
componentSubscribe('event-name/' + this.event, function( eventDetails ) {
// Do whatever you need to do now.
});
Таким образом, вы можете захотеть быть немного более описательным при именовании своих свойств, однако это в основном описывает, как это может работать. Тогда в случае с Alert, который я использую, мне не понадобится это свойство, поскольку на самом деле их не должно быть больше одного на странице. Однако этот вариант использования может развиваться, и тогда я мог бы использовать эту стратегию.
Ведь этого я до сих пор не могу отделаться от ощущения, что мне чего-то не хватает. Что где-то эта проблема решена. Возможно, это было решено в другой среде Javascript, такой как Vue.js. Тем не менее, я думаю, что это довольно надежное решение, и вам не нужно документировать возможности для имен событий. Это должно быть легко, ваш разработчик документирует все с удивительной точностью, верно… верно?
Я мог бы представить себе ситуацию, когда ваш компонент имеет несколько событий, и это может не очень хорошо масштабироваться. Однако в этой ситуации проблема может заключаться скорее в том, как компонент построен. Это определенно интересная проблема, с которой я никогда раньше не сталкивался.
