Phenquestions
Vue.js е гъвкава и пълноценна рамка за изграждане на огромни уеб приложения. Всяко уеб приложение е разделено на Компоненти. Например прост уебсайт, който включва заглавка, странична лента и някои други компоненти. За да управлява и обработва този подход, базиран на компоненти, Vue.js предлага връзката родител-дете между компонентите и ако искаме да изпратим някои данни между компонентите. Vue.js предлага реквизити за изпращане на данни от родителя до детски компонент, но за изпращане на данни от детето до родителя; трябва да излъчваме персонализирани събития. В тази статия научаваме за стрелба и слушане на персонализирани събития.На първо място, нека видим как да задействаме персонализирано събитие във Vue.js и след това как да слушате това събитие. Синтаксисът за задействане на събитие във Vue.js е
това.$ emit ('eventName')В този синтаксис трябва да бъдем внимателни, докато даваме име на събитието, защото използваме същото име; по-късно ще изслушаме това събитие. За да слушаме това събитие, можем да го слушаме, докато слушаме клик събитие във Vue.js. Например
Можем да напишем всеки израз в обърнатите запетаи, както и функция. Така че нека опитаме пример, за да го разберем по-добре.
Пример
Да предположим, че имаме Компонент с име „parentComponent“, който включва в него дъщерен компонент с името „childComponent“, на който предаваме съобщение, използвайки подпори.
Родителски компонент
Детски компонент
В дъщерния компонент получаваме реквизити и показваме съобщението в маркера 'p'.
msg
Сега, след като тези два компонента са настроени. Нека поздравим обратно към нашия ParentComponent. За да поздравим, първо ще създадем бутон и при щракване на този бутон ще извикаме функцията “helloBack”. След създаването на бутона HTML на дъщерния компонент ще бъде такъв
съобщение
Нека създадем функцията “helloBackFunc” и в обекта методи. В който ще излъчим “helloBackEvent” заедно с променливата “helloBackVar”, която съдържа низа “Hello Parent”. След създаване на функция, javascript на дъщерния компонент ще бъде такъв
Приключихме с изстрелването на събитието. Сега да преминем към родителския компонент за прослушване на събитието.
В компонента „Родител“ можем просто да слушаме събитието, точно както слушаме събитието за щракване. Ние просто ще слушаме събитието в тага на ChildComponent и ще извикаме функцията “thanks ()” върху него.
Във функцията за благодарност ще присвоим предадения низ на променливата, наречена “thanksMessage”. След създаване на функцията и присвояване на предадения низ на променливата, javascript на “parentComponent” ще бъде като този
И свържете някъде променливата “thanksMessage” в шаблона, за да видите дали работи или не.
Родителски компонент
thanksMessage
Детски компонент
След като създадете и напишете целия този код, отидете на уеб страницата и го презаредете, за да получите най-новите функционалности.
Можем да видим, че подпорите се предават успешно на дъщерния компонент. Сега, ако щракнем върху бутона, който всъщност е в дъщерния компонент. Съобщението за благодарност трябва да се покаже веднага след заглавието на родителския компонент.
Както можете да видите, той се показва.
И така, по този начин можем да излъчваме или задействаме потребителските събития и да ги слушаме в някой друг компонент във Vue.js.
Обобщение
В тази статия се научихме да излъчваме персонализирани събития във Vue.js. Тази статия съдържа подходящ пример стъпка по стъпка, за да я разберете с кратко обяснение заедно с нея. И така, надяваме се, че тази статия помага за създаването на по-добри и ясни концепции за излъчване на персонализирани събития във Vue.js. За още такова полезно съдържание продължавайте да посещавате linuxhint.com
