Phenquestions
Vue.js - это универсальный и полноценный фреймворк для создания огромных веб-приложений. Любое веб-приложение делится на Компоненты. Например, простой веб-сайт, который включает заголовок, боковую панель и некоторые другие компоненты. Чтобы управлять этим компонентным подходом и обрабатывать его, Vue.js предлагает отношения родитель-потомок между компонентами, и если мы хотим отправить некоторые данные между компонентами. Vue.js предлагает свойства для отправки данных от родителя к дочернему компоненту, но для отправки данных от дочернего элемента к родительскому; мы должны генерировать пользовательские события. В этой статье мы узнаем о запуске и прослушивании пользовательских событий.Прежде всего, давайте посмотрим, как запустить настраиваемое событие во Vue.js, а затем как прослушать это событие. Синтаксис для запуска события во Vue.js это
это.$ emit ('имя_события')В этом синтаксисе мы должны быть осторожны при присвоении имени событию, потому что мы используем то же имя; мы позже послушаем это событие. Чтобы прослушать это событие, мы можем прослушивать его, когда мы слушаем событие щелчка во Vue.js. Например
Мы можем записать любое выражение в кавычки, а также функцию. Итак, давайте попробуем пример, чтобы лучше это понять.
Пример
Предположим, у нас есть Компонент с именем «parentComponent», который включает в себя дочерний компонент с именем «childComponent», которому мы передаем сообщение с помощью свойств.
Родительский компонент
Дочерний компонент
В дочернем компоненте мы получаем реквизиты и показываем сообщение в теге 'p'.
msg
Теперь, после настройки этих двух компонентов. Давайте поздороваемся с нашим ParentComponent. Чтобы поздороваться, мы сначала создадим кнопку, и щелчком по этой кнопке мы вызовем функцию «helloBack». После создания кнопки HTML-код дочернего компонента будет таким:
сообщение
Давайте также создадим функцию «helloBackFunc» в объекте методов. В котором мы испустим «helloBackEvent» вместе с переменной «helloBackVar», которая содержит строку «Hello Parent». После создания функции javascript дочернего компонента будет таким
Мы закончили с запуском события. Теперь перейдем к родительскому компоненту для прослушивания события.
В родительском компоненте мы можем просто прослушивать событие, точно так же, как мы слушаем событие щелчка. Мы просто прослушиваем событие в теге ChildComponent и вызываем для него функцию «спасибо ()».
В функции благодарности мы присвоим переданную строку переменной с именем «thanksMessage». После создания функции и присвоения переданной строки переменной javascript «parentComponent» будет таким:
И привяжите переменную «thanksMessage» в шаблоне где-нибудь, чтобы увидеть, работает она или нет.
Родительский компонент
thanksMessage
Дочерний компонент
После создания и написания всего этого кода перейдите на веб-страницу и перезагрузите ее, чтобы получить новейшие функции.
Мы видим, что реквизиты успешно передаются дочернему компоненту. Теперь, если мы нажмем кнопку, которая на самом деле находится в дочернем компоненте. Сообщение с благодарностью должно отображаться сразу после заголовка родительского компонента.
Как видите, отображается.
Итак, вот как мы можем генерировать или запускать пользовательские события и прослушивать их в каком-либо другом компоненте во Vue.js.
Резюме
В этой статье мы научились генерировать пользовательские события в Vue.js. Эта статья содержит пошаговый пример, чтобы понять его, с кратким объяснением вместе с ним. Итак, мы надеемся, что эта статья поможет получить более четкие и понятные концепции генерации настраиваемых событий во Vue.js. Чтобы получить больше такого полезного контента, продолжайте посещать linuxhint.ком
