Rekwizyty Vue umożliwiają rejestrowanie niestandardowych atrybutów w komponencie. Dowiedz się dokładnie, jak z nich korzystać.
Jedną z kluczowych cech Vue jest jego modułowa architektura, która umożliwia tworzenie aplikacji internetowych poprzez łączenie małych komponentów wielokrotnego użytku. Dzięki temu możesz łatwo aktualizować i utrzymywać swoją aplikację internetową.
Każdy komponent w Vue może mieć swój własny zestaw danych i metod, które możesz przekazać jego komponentom potomnym za pomocą rekwizytów. Tutaj dowiesz się, jak używać rekwizytów w Vue do przekazywania danych z komponentów nadrzędnych do podrzędnych.
Czym są rekwizyty w Vue?
Rekwizyty — skrót od „właściwości” — to niestandardowe atrybuty w Vue, które komponent nadrzędny może przekazać swoim komponentom podrzędnym.
W Vue komponenty nadrzędne przekazują właściwości komponentom podrzędnym w przepływie jednokierunkowym. Oznacza to, że komponenty potomne mogą tylko odczytywać i wykorzystywać przekazane właściwości, ale nie mogą modyfikować danych.
Korzystanie z rekwizytów umożliwia tworzenie komponentów wielokrotnego użytku, które można zastosować w całej aplikacji. Rekwizyty oszczędzają czas i wysiłek, ponieważ można ponownie wykorzystać komponenty zamiast tworzyć nowe komponenty od podstaw.
Jak przekazać rekwizyty w Vue
Przekazywanie rekwizytów w Vue jest proste i różni się od sposobu podawania rekwizyty w React. Aby przekazać właściwość z komponentu nadrzędnego do jego komponentu podrzędnego w Vue, użyj opcji props w skrypcie komponentu podrzędnego.
Oto przykład:
Komponent podrzędny
<szablon>
<dz>
<h1>{{ tytuł }}h1>
<P>{{ wiadomość }}P>
<P>{{adres e-mail}}P>
dz>
szablon>
<scenariusz>
wyeksportuj domyślne {
nazwa: „Komponent potomny”,
rekwizyty: ["tytuł", "wiadomość", "adres e-mail"],
};
scenariusz>
Powyższy blok kodu opisuje komponent potomny Vue wykorzystujący właściwości do przekazywania danych z komponentu nadrzędnego. Komponent zawiera trzy elementy HTML, które wyświetlają plik tytuł, wiadomość, I Adres e-mail właściwości z interpolacją.
The rekwizyty opcja w komponencie potomnym przyjmuje tablicę właściwości. Ta tablica definiuje właściwości, które komponent podrzędny akceptuje z komponentu nadrzędnego.
Oto przykład komponentu nadrzędnego Vue przekazującego dane do komponentu podrzędnego za pomocą rekwizyty:
komponent macierzysty
<szablon>
<dz>
<komponent potomny
tytuł="Witaj świecie"
message="To jest wiadomość z komponentu nadrzędnego"
emailAddress="uż[email protected]"
/>
dz>
szablon><scenariusz>
zaimportuj ChildComponent z "./components/ChildComponent.vue";
wyeksportuj domyślne {
nazwa: „Komponent nadrzędny”,
składniki: {
Element potomny,
},
};
scenariusz>
Komponent nadrzędny w powyższym bloku kodu przekazuje trzy właściwości do komponentu podrzędnego. Blok kodu przekazuje wartości statyczne do tytuł, wiadomość, I Adres e-mail rekwizyty.
Możesz także przekazywać wartości dynamiczne do swoich rekwizytów za pomocą v-bind dyrektywa. v-bind jest dyrektywą używany w Vue do wiązania danych do atrybutów HTML.
Oto przykład komponentu nadrzędnego Vue wykorzystującego v-bind dyrektywa przekazująca wartości dynamiczne do rekwizytów:
komponent macierzysty
<szablon>
<dz>
<komponent potomny
:tytuł = "tytuł"
:wiadomość= "wiadomość"
:emailAddress= "Adres e-mail"
/>
dz>
szablon><scenariusz>
zaimportuj ChildComponent z "./components/ChildComponent.vue";
wyeksportuj domyślne {
nazwa: „Komponent nadrzędny”,
składniki: {
Element potomny,
},
dane() {
powrót {
tytuł: "Witaj kochanie",
wiadomość: „Jak się masz”,
Adres e-mail: „uż[email protected]”,
};
},
};
scenariusz>
Używając v-bind dyrektywę przekazującą dane do komponentu potomnego, możesz zaktualizować wartości rekwizytów na podstawie stanu komponentu nadrzędnego. Na przykład zmieniając tytuł data w komponencie nadrzędnym, tj tytuł prop przekazany do komponentu potomnego również zostanie zaktualizowany.
Ta metoda definiowania rekwizytów jako tablicy łańcuchów jest wzorcem skróconym. Każdy ciąg znaków w tablicy reprezentuje rekwizyt. Ta metoda jest idealna, gdy wszystkie rekwizyty w tablicy mają to samo Typ danych JavaScript.
Definiowanie rekwizytów jako obiektów w Vue
Definiowanie rekwizytów jako obiektu JavaScript zamiast tablicy pozwala na lepsze dostosowanie każdego rekwizytu. Zdefiniowanie rekwizytów jako obiektu w komponencie umożliwi określenie oczekiwanego typu danych i wartości domyślnej każdego rekwizytu.
Dodatkowo możesz oznaczyć określone rekwizyty zgodnie z wymaganiami, uruchamiając ostrzeżenie, jeśli rekwizyt nie zostanie dostarczony, gdy komponent jest używany. Definiowanie rekwizytów jako obiektu ma kilka zalet w porównaniu z definiowaniem rekwizytów jako tablicy, w tym:
- Zdefiniowanie oczekiwanego typu danych i wartości domyślnej dla każdego rekwizytu ułatwia Tobie i Twojemu zespołowi programistycznemu zrozumienie, jak dokładnie używać komponentu.
- Oznaczając rekwizyty zgodnie z wymaganiami, możesz wykryć błędy na wczesnym etapie procesu programowania i dostarczyć więcej informacji zespołowi programistów.
Oto przykład definiowania rekwizytów jako obiektów w komponencie Vue.js:
<szablon>
<dz>
<h1>{{ tytuł }}h1>
<P>{{ wiadomość }}P>
<P>{{adres e-mail}}P>
dz>
szablon>
<scenariusz>
wyeksportuj domyślne {
nazwa: „Komponent potomny”,
rekwizyty: {
tytuł: {
typ: Ciąg,
domyślnie: „Domyślny tytuł”,
},
wiadomość: {
typ: Ciąg,
domyślnie: "Wiadomość domyślna",
},
adres e-mail: {
typ: Ciąg,
wymagane: prawda,
},
},
};
scenariusz>
Ten blok kodu jest przykładem komponentu Vue.js, który używa właściwości do przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego. Blok kodu definiuje te rekwizyty jako obiekty z typem i wartością domyślną lub wymaganą flagą.
Blok kodu definiuje tytuł I wiadomość rekwizyty jako struny z a domyślny wartość i Adres e-mail podpórka jako wymagany strunowy.
Wybierz najlepszą metodę, która pasuje do Twojej aplikacji Vue
Nauczyłeś się definiować rekwizyty zarówno jako tablicę, jak i obiekt. Twoje preferencje powinny odpowiadać konkretnym potrzebom Twojej aplikacji.
Vue sprawdza się jako bardzo elastyczny framework JavaScript. Oferuje wiele metod i opcji, aby osiągnąć ten sam cel z różnymi zaletami dla dowolnej opcji lub metody, z którą zdecydujesz się pracować.