Phenquestions
Vue.js - це універсальний і повноцінний фреймворк для створення величезних веб-додатків. Будь-яка веб-програма ділиться на Компоненти. Наприклад, простий веб-сайт, який включає заголовок, бічну панель та деякі інші компоненти. Для управління та обробки цього підходу на основі компонентів Vue.js пропонує взаємозв'язок батьків і дітей між компонентами та якщо ми хочемо надсилати деякі дані між компонентами. Vue.js пропонує реквізит для надсилання даних від батьків до дочірнього компонента, але для надсилання даних від дитини до батьків; ми повинні випускати власні події. У цій статті ми дізнаємося про стрільбу та прослуховування нестандартних подій.Перш за все, давайте подивимося, як запустити власну подію у Vue.js, а потім як прослухати цю подію. Синтаксис запуску події у Vue.js є
це.$ emit ('eventName')У цьому синтаксисі нам слід бути обережними, даючи назву події, оскільки використовуючи те саме ім’я; пізніше ми послухаємо цю подію. Для того, щоб прослухати цю подію, ми можемо слухати її, слухаючи подію кліків у Vue.js. Наприклад
Ми можемо записати будь-який вираз у інвертовані коми, а також функцію. Тож спробуймо приклад, щоб краще його зрозуміти.
Приклад
Припустимо, у нас є Компонент з іменем “parentComponent”, який включає в нього дочірній компонент з іменем “childComponent”, якому ми передаємо повідомлення за допомогою props.
Батьківський компонент
Дочірній компонент
У дочірньому Компоненті ми отримуємо реквізит і відображаємо повідомлення в тезі 'p'.
msg
Тепер після налаштування цих двох компонентів. Скажімо привіт до нашого ParentComponent. Для того, щоб привітатись, ми спочатку створимо кнопку, і натисканням цієї кнопки ми викликаємо функцію «helloBack». Після створення кнопки HTML дочірнього компонента буде таким
повідомлення
Давайте також створимо функцію “helloBackFunc” в об’єкті методів. У якому ми випустимо “helloBackEvent” разом із змінною “helloBackVar”, що містить рядок “Hello Parent”. Після створення функції javascript дочірнього компонента буде таким
Ми закінчили з випалом події. Тепер перейдемо до батьківського компонента для прослуховування події.
У компоненті Parent ми можемо просто прослухати подію, подібно до того, як слухаємо подію click. Ми просто прослухаємо подію в тезі ChildComponent і викликаємо на ній функцію “thanks ()”.
У функції подяки ми призначимо переданий рядок змінній із назвою “thanksMessage”. Після створення функції та присвоєння переданої рядку змінної, javascript “parentComponent” буде таким
І прив’яжіть десь змінну “thanksMessage” у шаблоні, щоб побачити, працює вона чи ні.
Батьківський компонент
спасибіПовідомлення
Дочірній компонент
Після створення та написання всього цього коду перейдіть на веб-сторінку та перезавантажте його, щоб отримати найновіші функції.
Ми бачимо, що реквізит успішно передається дочірньому компоненту. Тепер, якщо ми натиснемо кнопку, яка насправді знаходиться в дочірньому компоненті. Повідомлення подяки повинно відображатися відразу після батьківського заголовка компонента.
Як бачите, він відображається.
Отже, таким чином ми можемо випускати або запускати власні події та слухати їх у якомусь іншому компоненті Vue.js.
Резюме
У цій статті ми навчилися випускати власні події у Vue.js. Ця стаття містить покроковий власний приклад, щоб зрозуміти її, а також коротке пояснення. Отже, ми сподіваємось, що ця стаття допоможе створити кращі та чіткіші концепції емітування нестандартних подій у Vue.js. Щоб отримати більше такого корисного вмісту, продовжуйте відвідувати linuxhint.ком
