Tutoriel de base de VUE3 : Utiliser des mixins pour étendre les fonctions des composants

Tutoriel de base VUE3 : Utiliser des mixins pour étendre les fonctions des composants

Avec le développement du développement front-end, de plus en plus de frameworks front-end ont été développés, et VUE est également l'un des meilleurs . VUE3 offre aux développeurs de nombreux avantages tels que des performances plus rapides et meilleures, une meilleure prise en charge SSR et des méthodes de développement de composants Vue plus simples. Cet article expliquera comment utiliser les mixins dans VUE3 pour étendre les fonctionnalités des composants.

Qu'est-ce que les mixins ?

Les Mixins sont un moyen de réutiliser du code et de partager la logique entre plusieurs composants. Il s'agit d'un objet javascript normal qui peut contenir n'importe quelle option de composant. Lorsqu'un composant utilise des mixins, toutes les options des mixins sont "mélangées" dans les propres options du composant.

Dans VUE2, la façon d'utiliser les mixins est la suivante :

// 定义一个mixins
export const mixins = {
  data() {
    return {
      msg: 'Hello Mixins!'
    }
  },
  methods: {
    showMsg() {
      console.log(this.msg);
    }
  }
}

// 使用mixins，在组件中引入即可
import { mixins } from './mixins.js'

export default {
  mixins: [mixins]
}

Dans VUE3, la façon d'utiliser les mixins est légèrement différente :

// 定义一个mixins
export const mixins = {
  data() {
    return {
      msg: 'Hello Mixins!'
    }
  },
  methods: {
    showMsg() {
      console.log(this.msg);
    }
  }
}

// 使用mixins，在组件中引入即可
import { defineComponent } from 'vue'
import { mixins } from './mixins.js'

export default defineComponent({
  mixins: [mixins]
})

D'en haut Comme le montrent les deux exemples, la manière d'utiliser les mixins dans VUE3 est presque la même que celle dans VUE2, sauf que defineComponent est utilisé à la place du précédent Vue.component<. /code>. <code>defineComponent代替了之前的Vue.component。

使用mixins扩展组件功能

在实际开发中，mixins的作用体现的愈发明显。经常会遇到多个组件有相同的逻辑，此时使用mixins就可以方便地将这些逻辑提取出来，在多个组件之间实现共用。

首先，在mixins.js文件中定义一个mixins，这里以下拉刷新为例：

export const Refresh = {
  data() {
    return {
      isLoading: false, // 是否在加载中
      startY: 0, // 下拉刷新区域起始y坐标
      distance: 0, // 下拉刷新区域拖拽的距离
      minPullDistance: 60 // 下拉刷新最小拖拽距离
    }
  },
  methods: {
    /**
     * 开始下拉
     */
    touchstart(event) {
      if (this.isLoading) {
        return
      }
      this.startY = event.touches[0].clientY
    },

    /**
     * 下拉过程中
     */
    touchmove(event) {
      if (this.isLoading) {
        return
      }
      this.distance = event.touches[0].clientY - this.startY
      if (this.distance > 0) { // 下拉
        event.preventDefault()
      }
    },

    /**
     * 结束下拉
     */
    touchend() {
      if (this.isLoading) {
        return
      }
      if (this.distance >= this.minPullDistance) {
        this.isLoading = true
        this.pullRefresh()
      } else {
        this.distance = 0
      }
    },

    /**
     * 下拉刷新
     */
    pullRefresh() {
      // 异步请求数据完成后需将isLoading设为false
      setTimeout(() => {
        this.isLoading = false
        this.distance = 0
      }, 3000)
    }
  }
}

以上就是下拉刷新用到的所有方法，我们可以将其抽离出来，放到一个名为Refresh的mixins中。

现在，我们可以在需要使用下拉刷新功能的组件中，引入Refreshmixins，如下所示：

<template>
  <div class="container"
       :style="{ top: distance + 'px' }"
       @touchstart="touchstart"
       @touchmove="touchmove"
       @touchend="touchend">
  
    <p v-if="isLoading">正在加载中...</p>
    
    <slot></slot>
  
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Refresh } from './mixins'

export default defineComponent({
  name: 'PullRefresh',
  mixins: [Refresh],
  methods: {
    handlePullRefresh() {
      console.log('进行下拉刷新操作')
    }
  }
})
</script>

在上面的代码中，我们在组件的选项中添加一个名为mixins的属性，将Refreshmixins引入组件中，即可扩展组件的功能。此时，组件已经具备了下拉刷新的功能，除了mixins

Utilisez des mixins pour étendre les fonctions des composants

Dans le développement réel, le rôle des mixins est devenu de plus en plus évident. Il arrive souvent que plusieurs composants aient la même logique. Dans ce cas, les mixins peuvent être utilisés pour extraire facilement ces logiques et les partager entre plusieurs composants.

Tout d'abord, définissez un mixins dans le fichier mixins.js Voici un exemple de rafraîchissement déroulant : #🎜🎜#rrreee#🎜🎜#Ce qui précède est utilisé. pour l'actualisation déroulante, nous pouvons extraire toutes les méthodes et les mettre dans des mixins nommés Refresh. #🎜🎜##🎜🎜#Maintenant, nous pouvons introduire des mixins Refresh dans les composants qui doivent utiliser la fonction d'actualisation déroulante, comme indiqué ci-dessous : #🎜🎜#rrreee#🎜🎜#In Dans le code ci-dessus, nous ajoutons un attribut nommé mixins aux options du composant et introduisons Refreshmixins dans le composant pour étendre les fonctionnalités du composant. À l'heure actuelle, le composant dispose déjà de la fonction d'actualisation déroulante, et d'autres attributs et méthodes, à l'exception de l'attribut mixins, peuvent également être utilisés normalement. #🎜🎜##🎜🎜#Résumé#🎜🎜##🎜🎜#Cet article explique comment étendre les fonctionnalités des composants via des mixins dans VUE3. Les mixins sont un moyen de réutiliser du code et de partager la logique entre plusieurs composants. Lorsqu'un composant utilise des mixins, toutes les options des mixins sont "mélangées" dans les propres options du composant. En utilisant des mixins, nous pouvons extraire du code logique réutilisable et améliorer la maintenabilité et la réutilisation des 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!