Како емитовати догађаје за комуникацију између Вуе компоненти

Структурирање ваших веб апликација коришћењем архитектуре компоненти олакшава изградњу и одржавање ваше апликације.

Емитовање прилагођених догађаја је један од начина на који можете да управљате комуникацијом између компоненти; реквизити и прорези су два друга. Прилагођени догађаји вам омогућавају да пошаљете податке од детета до родитељске компоненте.

Емитујте догађаје од детета до његовог родитеља

Вуе нуди много опција за комуникацију између компоненти. Један значајан начин за комуникација између компоненти је преко реквизита. Реквизити вам омогућавају да шаљете податке са родитељских компоненти на дете.

Шта се онда дешава ако желите да пошаљете податке од детета до родитељске компоненте? Вуе вам омогућава да емитујете прилагођене догађаје са подређених на родитељске компоненте. Овај процес омогућава родитељској компоненти да користи податке и функције из подређене компоненте.

На пример, замислите компоненту дугмета са функцијом која враћа вредност при сваком клику. Мораћете да емитујете тај догађај родитељској компоненти да бисте омогућили родитељској компоненти да ажурира своје стање или изврши радњу на основу враћене вредности.

Конвенција именовања за прилагођено емитоване догађаје у Вуе-у

Пре него што уђете у то како да емитујете прилагођене догађаје, морате да разумете конвенцију именовања прилагођених догађаја у Вуе-у. Пре него што се појавио Вуе 3, програмери су стриктно морали да дефинишу прилагођене догађаје ћевап-футрола, раздвајајући речи у именима знаком цртице.

Сада је стандардна пракса да дефинишете своје прилагођене догађаје у облику кебаба када радите са ХТМЛ шаблонима, и цамелЦасе када радите са ЈаваСцрипт-ом. Међутим, можете изабрати да користите било коју опцију када радите са ЈаваСцрипт-ом, пошто Вуе компајлира све прилагођене догађаје назад у кебаб-цасе.

Када емитујете прилагођени догађај, пренесите сврху догађаја описним именом. Ово је веома важно, посебно када радите у тиму, да би сврха догађаја била јасна.

Како емитовати прилагођене догађаје од подређене до родитељске компоненте

Постоје два начина на која можете да постигнете емитовање прилагођених догађаја у Вуе-у. Можете емитовати прилагођене догађаје инлине (директно у Вуе шаблону) помоћу $емит метод који Вуе пружа. Такође можете искористити дефинеЕмитс макро доступан из Вуе 3.

Емитовање прилагођених догађаја у Вуе-у помоћу методе $емит

$емит, уграђени Вуе метод, омогућава подређеној компоненти да пошаље догађај својој родитељској компоненти. Ову методу позивате на линији (унутар шаблона подређене компоненте) да бисте покренули прилагођени догађај. Метода $емит узима два аргумента: име догађаја који желите да емитујете и опциони терет који може да носи додатне податке.

Узмите у обзир ову подређену компоненту која емитује догађај да обавести надређену компоненту о клику на дугме:

 ЦхилдЦомпонент.вуе 
<скриптаподесити>
импорт { реф } из 'вуе';
цонст пост = реф('')
скрипта>
<шаблон>
<див>
<улазнитип="текст"в-модел="пошта">
<дугмев-он: кликните="$емит('кликнуто на дугме', пост)">поштадугме>
див>
шаблон>

Овај блок кода показује како да емитујете прилагођени догађај из подређене компоненте. Дете почиње тако што иницијализује променљиву поста са празним стрингом.

Дете компонента затим повезује улазни елемент са променљивом пост помоћу в-модела, а Вуе директива о везивању података. Ово везивање омогућава измене које уносите у поље за унос како би се променљива поста аутоматски ажурирала.

Елемент дугмета има в-он директиву која слуша догађаје клика на дугме. Клик на дугме позива методу $емит са два аргумента: именом догађаја, „кликнуто на дугме“ и вредношћу променљиве поста.

Надређена компонента сада може да слуша прилагођени догађај са в-он директивом за руковање догађајима у Вуе-у:

 ПарентЦомпонент.вуе 
импорт { реф } из "вуе";
импорт ЦхилдЦомпонент из "./цомпонентс/ЦхилдЦомпонент.вуе";
цонст постЛист = реф([])
цонст аддПостс = (пост) => {
 постЛист.валуе.пусх (пост)
}
скрипта>
<шаблон>
<див>
<ЦхилдЦомпонент @кликом на дугме="аддПостс"/>
<ул>
<лив-за="пост ин постЛист">{{ пошта }}ли>
ул>
див>
шаблон>

Овај блок кода демонстрира родитељску компоненту која увози и користи подређену компоненту од раније. Родитељска компонента дефинише а постЛист променљива низа као реактивна референца. Компонента тада дефинише ан аддПостс функција која се покреће, узимајући а пошта расправа. Функција додаје нови пост у постЛист низ са пусх() методом.

Тхе @кликнути на дугме слушалац догађаја снима прилагођени догађај ЦхилдЦомпонент емитује када кликнете на дугме. Овај догађај узрокује покретање функције аддПостс. На крају, блок кода прилаже в-за директива за рендеринг листе у Вуе до елемента ул за понављање низа постЛист.

Емитовање догађаја Са макроом дефинеЕмитс

Вуе 3 је представио дефинеЕмитс макро, који експлицитно дефинише догађаје које компонента може да емитује. Овај макро обезбеђује тип безбедан начин за емитовање догађаја који води ка структуриранијој бази кода.

Ево примера како можете користити макро дефинеЕмитс и позвати га у својој подређеној компоненти:

 ЦхилдЦомпонент.вуе 
<скриптаподесити>
импорт { реф } из "вуе";
цонст емит = дефинеЕмитс(["кликнути на дугме"]);
цонст пост = реф("");
цонст буттонЦлицк = () => {
 емит("кликнуто на дугме", пост.валуе);
};
скрипта>
<шаблон>
<див>
<улазнитип="текст"в-модел="пошта" />
<дугмев-он: кликните="буттонЦлицк">поштадугме>
див>
шаблон>

Иако функционалност остаје иста, постоје значајне разлике у синтакси кода између горњег кодног блока и оног са $емит функција.

У овом блоку кода, дефинеЕмитс макро дефинише кликом на дугме догађај. Позивањем овог макроа, блок кода враћа функцију $емит, омогућавајући вам да емитујете дефинисане догађаје. Низ прослеђен макроу дефинеЕмитс унутар компоненте ће садржати све догађаје које треба да емитујете родитељској компоненти.

Затим, блок кода дефинише а буттонЦлицк функција. Ова функција емитује догађај на који се кликне на дугме и променљиву објаве у надређену компоненту. Блок шаблона подређене компоненте садржи елемент дугмета.

Елемент дугмета има а в-он: кликните директива која покреће функцију буттонЦлицк. Надређена компонента тада може да користи подређену компоненту на исти начин као што је то урадила са методом $емит.

Вуе програмери имају користи од архитектуре засноване на компонентама

Можете комуницирати од подређене компоненте са њеним родитељем тако што ћете емитовати догађаје помоћу методе $емит и макроа дефинеЕмитс.

Можете имати користи од Вуе-ове архитектуре засноване на компонентама јер вам омогућава да пишете структуриранији, сажетији код. Са модерним ЈаваСцрипт оквирима као што је Вуе, можете користити веб компоненте, В3Ц веб стандард, да бисте постигли ову архитектуру засновану на компонентама.