Tutoriel de démarrage de VUE3 : Utilisation du plug-in Vue.js pour encapsuler le composant de notation par étoiles

Dans les applications Web, les composants de notation par étoiles sont souvent utilisés pour évaluer des biens, des services ou d'autres contenus. Afin de faciliter l'utilisation par les développeurs, la communauté Vue.js dispose déjà de nombreux plug-ins de composants de notation par étoiles. Cependant, il est également nécessaire d'encapsuler vous-même un plug-in de composant de notation par étoiles. Cet article abandonnera la manière traditionnelle d'écrire des composants, présentera l'API de composition de Vue.js 3 et expliquera comment utiliser le plug-in Vue.js pour encapsuler un composant de notation par étoiles.

Commençons par comprendre l'API de composition. L'API Composition présente principalement les avantages suivants :

1. Meilleure encapsulation logique : Désormais, la logique peut être regroupée selon la logique au lieu de définir des propriétés et des méthodes selon le cycle de vie ou les options de l'API. De plus, vous pouvez les regrouper selon le principe de responsabilité unique, ce qui rend le code plus facile à maintenir et à tester.
2. Réutilisation plus facile de la logique : l'encapsulation de la logique dans des hooks personnalisés facilite son partage et sa réutilisation au sein des composants, son partage avec d'autres développeurs ou même sa distribution sur npm pour une utilisation par d'autres.
3. Code de composant plus intuitif : étant donné que la logique est divisée en morceaux plus petits, le code est plus intuitif et plus facile à comprendre, réduisant ainsi le balisage et l'imbrication inutiles, ce qui facilite la déduction du rôle du composant.
4. Meilleure inférence de type : l'API Composition est étroitement intégrée à TypeScript, permettant aux développeurs de profiter des capacités d'inférence de type de TypeScript pour écrire du code plus robuste.

Ensuite, nous utilisons l'API Composition pour concevoir et implémenter le composant de notation par étoiles.

Étape 1 : Créer un plug-in Vue.js

Les plugins sont une extension de la structure sous-jacente de Vue.js. Les plugins Vue.js peuvent fournir des fonctionnalités de niveau global aux applications Vue.js, ils conviennent donc à l'implémentation de composants ou de directives communs. Voici les étapes de base pour créer et installer un plugin Vue.js :

1. Créez un objet JavaScript et définissez la méthode d'installation dans l'objet. Cette méthode reçoit Vue en paramètre et enregistre de nouveaux composants ou autres fonctions dans le cadre d'une nouvelle instance Vue().
2. Définissez des composants ou d'autres utilitaires dans la méthode d'installation.
3. Appelez la méthode static use() sur Vue et transmettez un objet contenant le plug-in qui doit être installé. Vue.js appellera la méthode install dans cet objet, en passant l'instance Vue.js comme paramètre à la méthode.

L'exemple de code est le suivant :

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

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

Étape 2 : Concevoir les propriétés et les événements du composant

Dans la composition API, il est recommandé d'utiliser La méthode reactive() définit l'état du composant. Utilisez la méthode Computed() pour calculer l'état dérivé du composant et utilisez la méthode watch() pour surveiller les changements d'état du composant. Pour mieux transmettre les données via les accessoires et les émettre, nous pouvons utiliser reactive() pour définir des objets de propriété et d'événement.

Le composant doit avoir les attributs suivants :

• rating : Note actuelle
• maxRating : Nombre maximum de notes#🎜🎜 #
starSize : taille des étoiles
• padding : espacement entre les étoiles
• showRating : s'il faut afficher la note

le composant doit avoir les événements suivants dans :

update : Déclenché automatiquement lorsque la note est mise à jour

Voici l'exemple de code pour définir les propriétés et l'événement objets : # 🎜🎜#

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

Étape 3 : Implémenter l'interface utilisateur du composant

Ensuite, nous utilisons le code du modèle pour implémenter l'interface utilisateur du composant. La fonction setup() est utilisée dans Vue.js3 pour définir l'état et les événements des composants, et les expressions d'interpolation et les instructions dans le modèle sont utilisées pour restituer l'interface utilisateur du composant.

Ce qui suit est un exemple de code pour implémenter l'interface utilisateur du composant :

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

Nous avons utilisé la directive v-for pour parcourir les étoiles de rendu, et avons utilisé des balises i et des icônes de police FontAwesome pour rendre les icônes d'étoiles. De cette façon, nous pouvons mettre à jour les notes en fonction des choix de l'utilisateur.

Étape 4 : Utiliser le composant

Maintenant, nous avons terminé le développement d'un plug-in de composant de notation par étoiles. Nous pouvons installer ce plugin globalement dans notre application Vue.js, puis l'utiliser dans n'importe quel modèle de composant.

Exemple de code pour utiliser des composants dans l'application Vue.js :

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

Dans cet exemple de code, nous enregistrons le plugin StarRating dans l'application Vue.js et le composant de notation est utilisé dans le composant my-component. Dans le composant my-component, nous utilisons le paramètre $event pour accéder à la nouvelle valeur de notation de l'événement de mise à jour.

Conclusion

L'API Composition apporte de nombreuses nouvelles fonctionnalités au développement de composants Vue.js. L'utilisation de ces nouvelles fonctionnalités combinées au mécanisme de plug-in Vue.js facilite l'encapsulation et la réutilisation des composants. Dans cet article, nous avons appris étape par étape comment développer un composant de notation par étoiles à l'aide de l'API Composition et du plugin Vue.js. Vous pouvez désormais utiliser ces techniques pour développer et empaqueter vos propres plug-ins de composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!