Реквизитите на Vue ви позволяват да регистрирате персонализирани атрибути на компонент. Разберете как точно да ги използвате.
Една от ключовите характеристики на Vue е неговата модулна архитектура, която ви позволява да създавате уеб приложения чрез комбиниране на малки компоненти за многократна употреба. Това ви позволява лесно да актуализирате и поддържате вашето уеб приложение.
Всеки компонент във Vue може да има свой собствен набор от данни и методи, които можете да предадете на неговите дъщерни компоненти с подпори. Тук ще научите как да използвате подпори във Vue, за да предавате данни от родителски към дъщерни компоненти.
Какво представляват подпорите във Vue?
Props — съкращение от „свойства“ — са персонализирани атрибути във Vue, които родителският компонент може да предаде на дъщерните си компоненти.
Във Vue родителските компоненти предават реквизити на дъщерни компоненти в еднопосочен поток. Това означава, че дъщерните компоненти могат само да четат и използват тези предадени реквизити, но не могат да променят данните.
Използването на подпори ви позволява да създавате компоненти за многократна употреба, които можете да прилагате във вашето приложение. Реквизитите ви спестяват време и усилия, тъй като можете да използвате повторно компоненти, вместо да създавате нови компоненти от нулата.
Как да подадете подпори във Vue
Подаването на реквизити във Vue е просто и различно от начина, по който преминавате подпори в React. За да прехвърлите проп от родителски компонент към неговия дъщерен компонент във Vue, използвайте опцията props в скрипта на дъщерния компонент.
Ето един пример:
Детският компонент
<шаблон>
<див>
<h1>{{ заглавие }}h1>
<стр>{{ съобщение }}стр>
<стр>{{ имейл адрес }}стр>
див>
шаблон>
<сценарий>
експортиране по подразбиране {
име: "ChildComponent",
props: ["title", "message", "emailAddress"],
};
сценарий>
Горният кодов блок описва дъщерен компонент на Vue, използващ подпори за предаване на данни от родителски компонент. Компонентът включва три HTML елемента, които показват заглавие, съобщение, и имейл адрес свойства с интерполация.
The реквизит опция в дъщерния компонент приема масив от свойства. Този масив дефинира свойствата, които дъщерният компонент приема от родителския компонент.
Ето пример за родителски компонент на Vue, предаващ данни към дъщерния компонент с реквизит:
родителски компонент
<шаблон>
<див>
<дете-компонент
title="Здравей свят"
message="Това е съобщение от родителския компонент"
emailAddress="[email protected]"
/>
див>
шаблон><сценарий>
импортиране на ChildComponent от "./components/ChildComponent.vue";
експортиране по подразбиране {
име: "ParentComponent",
компоненти: {
ChildComponent,
},
};
сценарий>
Родителският компонент в горния кодов блок предава три подпорки на дъщерния компонент. Кодовият блок предава статични стойности на заглавие, съобщение, и имейл адрес реквизит.
Можете също да предавате динамични стойности на вашите реквизити с v-свързване директива. v-свързване е директива използвани във Vue за обвързване на данни към HTML атрибути.
Ето пример за родителския компонент на Vue, използващ v-свързване директива за предаване на динамични стойности към подпорите:
родителски компонент
<шаблон>
<див>
<дете-компонент
:title= "заглавие"
:message= "съобщение"
:emailAddress= "имейл адрес"
/>
див>
шаблон><сценарий>
импортиране на ChildComponent от "./components/ChildComponent.vue";
експортиране по подразбиране {
име: "ParentComponent",
компоненти: {
ChildComponent,
},
данни() {
връщане {
заглавие: "Добре дошла скъпа",
съобщение: "Как си",
имейл адрес: "[email protected]",
};
},
};
сценарий>
Използвайки v-свързване директива за предаване на данни към дъщерния компонент, можете да актуализирате стойностите на props въз основа на състоянието на родителския компонент. Например чрез промяна на заглавие data property в родителския компонент, the заглавие prop, предадено на дъщерния компонент, също ще бъде актуализирано.
Този метод за дефиниране на подпори като масив от низове е съкратен модел. Всеки от низовете в масива представлява проп. Този метод е идеален, когато всички подпори в масива имат еднакви Тип данни на JavaScript.
Дефиниране на подпори като обект във Vue
Дефинирането на props като JavaScript обект вместо масив позволява по-добро персонализиране на всеки props. Дефинирането на props като обект в компонент ще ви позволи да посочите очаквания тип данни и стойността по подразбиране на всеки props.
Освен това можете да маркирате конкретни пропове според изискванията, задействайки предупреждение, ако проп не е предоставен, когато компонентът се използва. Дефинирането на props като обект предлага няколко предимства пред дефинирането на props като масив, включително:
- Дефинирането на очаквания тип данни и стойността по подразбиране за всяка проп улеснява вас и вашия екип от разработчици да разберете как точно да използвате компонента.
- Чрез маркиране на подпори според изискванията можете да уловите грешки в началото на процеса на разработка и да предоставите повече информация на екипа разработчици.
Ето пример за това как да дефинирате props като обект в Vue.js компонент:
<шаблон>
<див>
<h1>{{ заглавие }}h1>
<стр>{{ съобщение }}стр>
<стр>{{ имейл адрес }}стр>
див>
шаблон>
<сценарий>
експортиране по подразбиране {
име: "ChildComponent",
подпори: {
заглавие: {
тип: низ,
по подразбиране: "Заглавие по подразбиране",
},
съобщение: {
тип: низ,
по подразбиране: "Съобщение по подразбиране",
},
имейл адрес: {
тип: низ,
задължително: вярно,
},
},
};
сценарий>
Този кодов блок е пример за Vue.js компонент, който използва props за предаване на данни от родителски компонент към дъщерен компонент. Кодовият блок дефинира тези подпори като обекти с тип и стойност по подразбиране или задължителен флаг.
Кодовият блок дефинира заглавие и съобщение подпори като струни с a по подразбиране стойност и имейл адрес опора като a изисква се низ.
Изберете най-добрия метод, който отговаря на вашето приложение Vue
Научихте как да дефинирате props като масив и обект. Предпочитанията ви трябва да отговарят на специфичните нужди на вашето приложение.
Vue се доказва като много гъвкава JavaScript рамка. Той предлага много методи и опции за постигане на една и съща цел с различни предимства за всяка от опциите или методите, с които изберете да работите.
