In Webanwendungen werden Sternebewertungskomponenten häufig zur Bewertung von Waren, Dienstleistungen oder anderen Inhalten verwendet. Um Entwicklern die Verwendung zu erleichtern, verfügt die Vue.js-Community bereits über viele Plug-Ins für Sternebewertungskomponenten. Es ist jedoch auch erforderlich, selbst ein Plug-In für Sternebewertungskomponenten zu kapseln. In diesem Artikel wird die traditionelle Art des Schreibens von Komponenten aufgegeben, die Kompositions-API von Vue.js 3 vorgestellt und erläutert, wie das Vue.js-Plug-In zum Kapseln einer Sternebewertungskomponente verwendet wird.
Lassen Sie uns zunächst die Kompositions-API verstehen. Die Composition API bietet vor allem folgende Vorteile:
Als nächstes werden wir die Composition API verwenden, um die Sternebewertungskomponente zu entwerfen und zu implementieren.
Plugins sind Möglichkeiten, die zugrunde liegende Struktur von Vue.js zu erweitern. Vue.js-Plugins können Vue.js-Anwendungen Funktionen auf globaler Ebene bereitstellen und eignen sich daher für die Implementierung allgemeiner Komponenten oder Anweisungen. Hier sind die grundlegenden Schritte zum Erstellen und Installieren eines Vue.js-Plugins:
Der Beispielcode lautet wie folgt:
// 定义插件对象 const StarRating = { install: function(Vue) { // 在install方法中注册全局组件 star-rating Vue.component('star-rating', { // 组件选项 }) } } // 调用Vue.use()方法安装插件 Vue.use(StarRating)
In der Composition API wird empfohlen, die Methode reactive() zu verwenden, um den Zustand der Komponente zu definieren. Verwenden Sie die Methode „computed()“, um den abgeleiteten Zustand der Komponente zu berechnen, und verwenden Sie die Methode „watch()“, um die Zustandsänderungen der Komponente zu überwachen. Um Daten besser über Requisiten und Emitter weiterzuleiten, können wir reactive() verwenden, um Eigenschafts- und Ereignisobjekte zu definieren.
Die Komponente sollte die folgenden Attribute haben:
Sie sollten die folgenden Ereignisse in Ihrer Komponente haben:
Hier ist der Beispielcode zum Definieren der Eigenschaften und Ereignisobjekte:
const StarRating = { install: function(Vue) { Vue.component('star-rating', { setup(props, {emit}) { const state = reactive({ rating: 0, maxRating: props.maxRating || 5, starSize: props.starSize || 25, padding: props.padding || 5, showRating: props.showRating || false, }) function updateRating(rating) { state.rating = rating emit('update', rating) } return { state, updateRating } } }) } }
Als nächstes verwenden wir Vorlagencode, um die Benutzeroberfläche der Komponente zu implementieren. Die Funktion setup() wird in Vue.js3 verwendet, um Komponentenstatus und -ereignisse festzulegen, und Interpolationsausdrücke und Anweisungen in der Vorlage werden zum Rendern der Komponenten-Benutzeroberfläche verwendet.
Das Folgende ist der Beispielcode zum Implementieren der Komponenten-Benutzeroberfläche:
const StarRating = { install: function(Vue) { Vue.component('star-rating', { setup(props, {emit}) { const state = reactive({ rating: 0, maxRating: props.maxRating || 5, starSize: props.starSize || 25, padding: props.padding || 5, showRating: props.showRating || false, }) function updateRating(rating) { state.rating = rating emit('update', rating) } const stars = [] for (let i = 0; i < state.maxRating; i++) { stars.push(i < state.rating ? 'star' : 'star_border') } return { state, updateRating, stars, } }, template: ` <div> <i v-for="star in stars" :key="star" :class="[star]" :style="{ 'font-size': state.starSize + 'px', 'padding-right': state.padding + 'px', }" @click="updateRating(stars.indexOf(star) + 1)" ></i> <span v-if="state.showRating">{{state.rating}}/{{state.maxRating}}</span> </div> ` }) } }
Wir haben die v-for-Direktive verwendet, um die Sterne in einer Schleife zu rendern, und das i-Tag und das FontAwesome-Schriftsymbol zum Rendern des Sternsymbols verwendet. Auf diese Weise können wir die Bewertungen basierend auf den Entscheidungen des Benutzers aktualisieren.
Jetzt haben wir die Entwicklung eines Komponenten-Plugins für die Sternebewertung abgeschlossen. Wir können dieses Plugin global in unserer Vue.js-Anwendung installieren und es dann in jeder Komponentenvorlage verwenden.
Beispielcode für die Verwendung von Komponenten in der Vue.js-Anwendung:
const app = Vue.createApp({}) app.use(StarRating) app.component('my-component', { data() { return { rating: 3 } }, template: ` <div> <star-rating :max-rating="5" :show-rating="true" :rating="rating" @update="rating = $event" /> </div> ` }) app.mount('#app')
In diesem Beispielcode haben wir das StarRating-Plugin in der Vue.js-Anwendung registriert und die Bewertungskomponente in der my-component-Komponente verwendet. In der Komponente „my-component“ verwenden wir den Parameter „$event“, um auf den neuen Bewertungswert des Aktualisierungsereignisses zuzugreifen.
Composition API bringt viele neue Funktionen in die Komponentenentwicklung von Vue.js. Die Verwendung dieser neuen Funktionen in Kombination mit dem Plug-in-Mechanismus von Vue.js erleichtert die Kapselung und Wiederverwendung von Komponenten. In diesem Artikel haben wir Schritt für Schritt gelernt, wie man mit der Composition API und dem Vue.js-Plugin eine Sternebewertungskomponente entwickelt. Jetzt können Sie diese Techniken verwenden, um Ihre eigenen Komponenten-Plug-Ins zu entwickeln und zu verpacken.
Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Tutorial: Verwenden des Vue.js-Plug-Ins zum Kapseln der Sternebewertungskomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!