Conseils pour utiliser les mixins dans Vue pour réutiliser des composants tels que des listes, des tableaux, des formulaires, etc.

Vue est un framework JavaScript populaire doté de nombreuses fonctionnalités et outils puissants pour créer des applications Web modernes et efficaces. L’un d’eux est les mixins. Mixin est un mécanisme avancé de Vue. Il nous permet d'extraire des parties fonctionnelles réutilisables des composants afin que ces fonctions puissent être réutilisées efficacement. Ceci est très utile lorsque nous développons des composants communs tels que des listes, des tableaux et des formulaires.

Comment fonctionne Mxin

mixin peut être compris comme la copie d'objets. Nous pouvons copier un objet mixin dans un autre objet, fusionnant ainsi les deux objets dans un nouvel objet. Lorsque nous ajoutons un objet mixin à un composant Vue, toutes les propriétés et méthodes de l'objet mixin seront copiées dans le composant. De plus, si l'objet mixin et le composant ont les mêmes propriétés ou méthodes, les propriétés ou méthodes du composant remplaceront les mêmes propriétés ou méthodes dans l'objet mixin.

Vous pouvez créer un mixin via le code suivant :

const myMixin = {
  data() {
    return {
      message: 'Hello, mixin!'
    }
  },
  methods: {
    foo() {
      console.log('foo');
    }
  }
};

Les mixins sont généralement mélangés dans des composants. Vous pouvez ajouter le mixin à un composant via le code suivant :

const Component = Vue.extend({
  mixins: [myMixin],
  data() {
    return {
      anotherMessage: 'Hello, component!'
    }
  },
  methods: {
    bar() {
      console.log('bar');
    }
  }
});

Dans cet exemple, nous avons créé un composant Vue et mixé. myMixin dans le composant via l'attribut mixins, afin que le composant ait les data</code déclarées dans <code>myMixin > et méthodes. myMixin 通过 mixins 属性混合到组件中，这样组件中就具有了 myMixin 中声明的 data 和 methods 属性。

实现复用组件

现在，我们以列表组件为例，来探讨如何使用 mixin 实现复用组件。

首先我们可以创建一个列表数据 mixin（假定所有列表组件都需要用到数据），我们创建一个名为 listDataMixin 的 mixin：

export default {
  data: function() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    getItems() {},
    changePage() {},
    refreshList() {}
  },
  mounted() {
    this.refreshList();
  }
};

在这里，listDataMixin 定义了一个包含数据、计算属性和方法的对象，其中：

• data 部分定义了通用的列表相关的基本数据:

  • list：当前页的列表数据;
  • currentPage：当前页数;
  • pageSize：每页显示多少条记录;
  • total：共有多少条记录;
• computed 部分定义值计算属性 totalPage，该属性获取了总页数，通过 Math.ceil 计算获得;

• methods 部分定义了常用的操作方法：

  • getItems()：获取当前页数据;
  • changePage(pageNumber)：切换页面，传入页码参数;
  • refreshList()：刷新列表数据;
• mounted 部分执行 refreshList() 方法，渲染页面前自动获取请求数据并刷新列表。

以上就是一个通用的列表数据 Mixin，该 Mixin 中的属性和方法可以进行重复利用。可以通过下面的代码将该 Mixin，添加到你的列表组件中来使用：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>表头</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <a v-if="currentPage > 1" @click="changePage(currentPage - 1)">上一页</a>
      <a v-for="pageNumber in totalPage" :key="pageNumber" :class="{ active: pageNumber === parseInt(currentPage) }" @click="changePage(pageNumber)">{{ pageNumber }}</a>
      <a v-if="currentPage < totalPage" @click="changePage(currentPage + 1)">下一页</a>
    </div>
  </div>
</template>

<script>
import listDataMixin from '../mixin/listDataMixin';

export default {
  mixins: [listDataMixin],
  methods: {
    getItems() {},
    changePage() {},
    refreshList() {}
  }
};
</script>

我们在组件中添加了 listDataMixin

Implémentation de composants réutilisables

Maintenant, prenons le composant liste comme exemple pour explorer comment utiliser les mixins pour implémenter des composants réutilisables.

Tout d'abord, nous pouvons créer un mixin de données de liste (en supposant que tous les composants de la liste doivent utiliser des données), nous créons un mixin nommé listDataMixin :

rrreee

Ici, le code listDataMixin > définit un objet contenant des données, des propriétés calculées et des méthodes, dans lequel : 🎜

• 🎜La partie data définit les données de base générales liées à la liste : 🎜
  • list : liste les données de la page actuelle ;
  • currentPage : numéro de la page actuelle ;
  • pageSize : Comment de nombreux enregistrements sont affichés sur chaque page ;
  • total : combien d'enregistrements y a-t-il au total ;
• calculated définit partiellement l'attribut de calcul de valeur <code>totalPage, qui obtient le nombre total de pages et est calculé via Math.ceil ;
• 🎜 La section méthodes définit les méthodes de fonctionnement couramment utilisées : 🎜
  • getItems() : récupère les données de la page actuelle ;
  • changePage(pageNumber)  : Changer de page et transmettre le paramètre de numéro de page ;
  • refreshList() : Actualiser les données de la liste ;
• La partie montée exécute la méthode refreshList() pour obtenir automatiquement les données demandées et actualiser la liste avant de restituer la page.

🎜Ce qui précède est une liste générale de données Mixin. Les propriétés et méthodes de ce Mixin peuvent être réutilisées. Vous pouvez ajouter ce Mixin à votre composant de liste avec le code suivant : 🎜rrreee🎜 Nous avons ajouté le Mixin listDataMixin dans le composant, et les champs et méthodes sont définis dans ce Mixin pour que nos composants fournissent des données publiques et services publics, permettant ainsi la réutilisation des composants. 🎜🎜Nous pouvons ajouter à nouveau le même Mixin dans d'autres composants pour obtenir des fonctionnalités spécifiques adaptées à d'autres scénarios tout en gardant les champs et les méthodes publics. Cela peut grandement améliorer le taux de réutilisation du code. 🎜🎜Résumé🎜🎜Dans cet article, nous avons présenté comment utiliser les mixins pour réutiliser les parties fonctionnelles communes dans Vue.js et comment appliquer ces fonctions pour lister les composants. Les mixins nous permettent de partager la logique des composants et de créer des bases de code réutilisables, améliorant ainsi notre évolutivité, notre maintenabilité et la duplication de code. Nous espérons vous avoir donné quelques idées sur la façon d'utiliser les mixins afin que vous puissiez commencer à créer des applications Web plus puissantes. 🎜

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!