Tutoriel d'introduction au développement VUE3 : utiliser les composants Vue.js pour encapsuler des composants fonctionnels complexes

Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des applications d'une seule page, des interfaces Web réactives et des applications frontales complexes. La dernière version de Vue.js, Vue3, apporte de nombreuses nouvelles fonctionnalités et améliorations de performances, faisant de Vue.js un framework front-end encore meilleur.

Cet article expliquera comment utiliser les composants Vue.js pour encapsuler des composants fonctionnels complexes. Utilisons un exemple pratique pour illustrer.

Supposons que nous développions un site Web de commerce électronique et que nous devions développer un système d'évaluation des produits. Ce système de commentaires devrait avoir les fonctionnalités suivantes :

1. Afficher les commentaires
2. Publier un commentaire
3. Supprimer un commentaire

Pour encapsuler ces fonctionnalités complexes, nous allons créer un composant de commentaire. Voici les étapes pour implémenter ce composant :

Étape 1 : Créer un composant de commentaires

Nous allons créer un composant dans Vue.js en utilisant la directive v-for pour afficher tous les commentaires. Le code est le suivant :

<template>
  <div>
    <h2>评论</h2>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{ comment }}
        <button @click="deleteComment(index)">删除</button>
      </li>
    </ul>
    <form @submit.prevent="addComment">
      <input type="text" v-model="newComment" placeholder="请输入评论内容">
      <button type="submit">提交</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      comments: [
        '这是一条评论',
        '这是另一条评论'
      ],
      newComment: ''
    }
  },
  methods: {
    addComment() {
      this.comments.push(this.newComment);
      this.newComment = '';
    },
    deleteComment(index) {
      this.comments.splice(index, 1);
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un tableau de commentaires, qui stocke tous les commentaires. Nous définissons également une variable newComment, qui représente le nouveau commentaire que nous ajoutons. Dans la méthode addComment, nous ajoutons le nouveau commentaire au tableau comments. Dans la méthode deleteComment, nous utilisons la fonction splice pour supprimer le commentaire du tableau comments.

Étape 2 : Utilisez le composant d'évaluation dans l'application principale

Nous pouvons utiliser ce composant dans l'application, par exemple en l'ajoutant à la page de détails du produit. Comme indiqué ci-dessous :

<template>
  <div>
    <h1>商品名称</h1>
    <p>商品描述</p>
    <img src="商品图片url" alt="商品图片">
 
    <Comment></Comment>
  </div>
</template>
 
<script>
import Comment from './Comment.vue'
 
export default {
  components: {
    Comment
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté le composant Comment en tant que composant enfant à l'application principale.

Nous avons maintenant terminé le développement du composant commentaire. En encapsulant ces fonctions complexes, nous pouvons rapidement créer et réutiliser des composants Vue.js. Il sera très simple d'ajouter des styles personnalisés aux composants, d'améliorer l'interactivité et d'ajouter d'autres fonctionnalités.

Dans le didacticiel Vue3 d'aujourd'hui, nous avons appris à utiliser les composants Vue.js pour encapsuler des composants fonctionnels complexes. L'approche composée de composants de Vue.js, ainsi que les chaînes d'outils populaires telles que Vue CLI, ont fait de Vue.js un framework front-end largement adopté. Nous espérons que cet article a inspiré les développeurs qui sont actuellement ou se préparent à apprendre Vue.js et leur a fourni des conseils utiles pour développer de meilleures applications.

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!