Како користити реквизите за стварање бољих Вуе компоненти

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

Свака компонента у Вуе-у може имати сопствени скуп података и метода, које можете пренети на њене подређене компоненте помоћу пропс-а. Овде ћете научити како да користите пропс у Вуе-у за пренос података са родитељских компоненти на подређене.

Шта су реквизити у Вуе-у?

Реквизити—скраћеница за „пропертиес“—су прилагођени атрибути у Вуе-у које родитељска компонента може проследити својим подређеним компонентама.

У Вуе-у, родитељске компоненте прослеђују пропс подређеним компонентама у једносмерном току. То значи да подређене компоненте могу само да читају и користе ове прослеђене пропс, али не могу да мењају податке.

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

Како пренети реквизите у Вуе

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

Ево примера:

 Дете компонента 
<шаблон>
<див>
<х1>{{ наслов }}х1>
<стр>{{ порука }}стр>
<стр>{{ адреса Е-поште }}стр>
див>
шаблон>
<скрипта>
извоз подразумевано {
 име: "ЦхилдЦомпонент",
 реквизити: ["наслов", "порука", "адреса е-поште"],
};
скрипта>

Горњи блок кода описује Вуе подређену компоненту која користи пропс за прослеђивање података из надређене компоненте. Компонента укључује три ХТМЛ елемента који приказују наслов, порука, и адреса Е-поште својства са интерполацијом.

Тхе реквизити опција у подређеној компоненти преузима низ својстава. Овај низ дефинише својства која подређена компонента прихвата од надређене компоненте.

Ево примера родитељске компоненте Вуе која прослеђује податке подређеној компоненти са реквизити:

 родитељска компонента 
<шаблон>
<див>
<дете-компонента
 титле="Хало Ворлд"
 мессаге="Ово је порука од надређене компоненте"
 емаилАддресс="корисник0000@екампле.цом"
 />
див>
шаблон>
<скрипта>
импорт ЦхилдЦомпонент из "./цомпонентс/ЦхилдЦомпонент.вуе";
извоз подразумевано {
 име: "ПарентЦомпонент",
 компоненте: {
 ЦхилдЦомпонент,
 },
};
скрипта>

Родитељска компонента у горњем блоку кода прослеђује три пропс-а подређеној компоненти. Блок кода преноси статичке вредности у наслов, порука, и адреса Е-поште реквизити.

Такође можете проследити динамичке вредности својим реквизитима помоћу в-бинд директива. в-бинд је директива користи се у Вуе-у за повезивање података на ХТМЛ атрибуте.

Ево примера родитељске компоненте Вуе која користи в-бинд директива за прослеђивање динамичких вредности у пропс:

 родитељска компонента 
<шаблон>
<див>
<дете-компонента
 :титле= "наслов"
 :мессаге= "порука"
 :емаилАддресс= "адреса е-поште"
 />
див>
шаблон>
<скрипта>
импорт ЦхилдЦомпонент из "./цомпонентс/ЦхилдЦомпонент.вуе";
извоз подразумевано {
 име: "ПарентЦомпонент",
 компоненте: {
 ЦхилдЦомпонент,
 },
 дата() {
 врати {
 наслов: "Добро дошли драги",
 порука: "Како си",
 адреса е-поште: "усер0000@гмаил.цом",
 };
 },
};
скрипта>

Помоћу в-бинд директиву за прослеђивање података подређеној компоненти, можете ажурирати вредности пропс-а на основу стања родитељске компоненте. На пример, променом наслов својство података у родитељској компоненти, тхе наслов пропс прослеђен подређеној компоненти ће такође бити ажуриран.

Овај метод дефинисања реквизита као низа низова је скраћени образац. Сваки од стрингова у низу представља проп. Овај метод је идеалан када сви реквизити у низу имају исте ЈаваСцрипт тип података.

Дефинисање реквизита као објекта у Вуе-у

Дефинисање пропс-а као ЈаваСцрипт објекта уместо низа омогућава боље прилагођавање сваког пропса. Дефинисање пропс-а као објекта у компоненти ће вам омогућити да наведете очекивани тип података за сваки пропс и подразумевану вредност.

Поред тога, можете означити одређене реквизите према потреби, активирајући упозорење ако се реквизит не обезбеди када је компонента у употреби. Дефинисање реквизита као објекта нуди неколико предности у односу на дефинисање реквизита као низа, укључујући:

1. Дефинисање очекиваног типа података и подразумеване вредности за сваки пропс олакшава вама и вашем тиму програмера да разумете како тачно да користите компоненту.
2. Означавањем реквизита према потреби можете ухватити грешке рано у процесу развоја и пружити више информација тиму програмера.

Ево примера како да дефинишете пропс као објекат у компоненти Вуе.јс:

<шаблон>
<див>
<х1>{{ наслов }}х1>
<стр>{{ порука }}стр>
<стр>{{ адреса Е-поште }}стр>
див>
шаблон>
<скрипта>
извоз подразумевано {
 име: "ЦхилдЦомпонент",
 реквизити: {
 наслов: {
 тип: стринг,
 подразумевано: "Подразумевани наслов",
 },
 порука: {
 тип: стринг,
 подразумевано: "Подразумевана порука",
 },
 адреса Е-поште: {
 тип: стринг,
 потребно: тачно,
 },
 },
};
скрипта>

Овај блок кода је пример Вуе.јс компоненте која користи пропс за прослеђивање података из надређене компоненте у подређену компоненту. Блок кода дефинише ове пропс као објекте са типом и подразумеваном вредношћу или обавезном заставицом.

Блок кода дефинише наслов и порука реквизити као жице са а Уобичајено вредност и адреса Е-поште проп као а потребан низ.

Изаберите најбољи метод који одговара вашој Вуе апликацији

Научили сте како да дефинишете пропс и као низ и као објекат. Ваше жеље треба да одговарају специфичним потребама ваше апликације.

Вуе се доказује као веома флексибилан ЈаваСцрипт оквир. Нуди много метода и опција за постизање истог циља са различитим предностима за било коју од опција или метода са којима одлучите да радите.