VUE3-Erste-Schritte-Tutorial: Verwenden des Vue.js-Plug-Ins zum Kapseln der Sternebewertungskomponente

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:

1. Bessere Logikkapselung: Jetzt kann Logik nach Logik gruppiert werden, anstatt Eigenschaften und Methoden nach Lebenszyklus oder Options-API zu definieren. Darüber hinaus können Sie sie nach dem Single-Responsibility-Prinzip gruppieren, was die Wartung und das Testen des Codes erleichtert.
2. Einfachere Wiederverwendung von Logik: Durch die Kapselung von Logik in benutzerdefinierten Hooks ist es einfach, sie innerhalb von Komponenten zu teilen und wiederzuverwenden, sie mit anderen Entwicklern zu teilen oder sie sogar auf npm zu verteilen, damit andere sie verwenden können.
3. Intuitiverer Komponentencode: Da die Logik in kleinere Teile aufgeteilt ist, wird der Code intuitiver und leichter verständlich, wodurch unnötiges Markup und Verschachtelungen reduziert werden und die Rolle der Komponente leichter abgeleitet werden kann.
4. Bessere Typinferenz: Die Composition API ist eng in TypeScript integriert, sodass Entwickler die Typinferenzfunktionen von TypeScript nutzen können, um robusteren Code zu schreiben.

Als nächstes werden wir die Composition API verwenden, um die Sternebewertungskomponente zu entwerfen und zu implementieren.

Schritt 1: Erstellen Sie ein Vue.js-Plugin

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:

1. Erstellen Sie ein JavaScript-Objekt und definieren Sie die Installationsmethode im Objekt. Diese Methode empfängt Vue als Parameter und registriert neue Komponenten oder andere Funktionen im Rahmen einer neuen Vue()-Instanz.
2. Definieren Sie Komponenten oder andere Dienstprogramme in der Installationsmethode.
3. Rufen Sie die statische Methode use() in Vue auf und übergeben Sie ein Objekt, das das zu installierende Plug-in enthält. Vue.js ruft die Installationsmethode in diesem Objekt auf und übergibt die Vue.js-Instanz als Parameter an die Methode.

Der Beispielcode lautet wie folgt:

// 定义插件对象
const StarRating = {
  install: function(Vue) {
    // 在install方法中注册全局组件 star-rating
    Vue.component('star-rating', {
      // 组件选项
    })
  }
}

// 调用Vue.use()方法安装插件
Vue.use(StarRating)

Schritt 2: Entwerfen Sie die Eigenschaften und Ereignisse der Komponente

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:

• rating: aktuelle Bewertung
• maxRating: maximale Anzahl von Bewertungen
• starSize: Sterngröße
• padding: Abstand zwischen den Sternen
• showRating: ob die Bewertung angezeigt werden soll

Sie sollten die folgenden Ereignisse in Ihrer Komponente haben:

• Update: Wird automatisch ausgelöst, wenn die Bewertung aktualisiert wird

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
        }
      }
    })
  }
}

Schritt 3: Implementieren Sie die Komponenten-Benutzeroberfläche

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.

Schritt 4: Komponenten verwenden

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.

Fazit

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!