Grundlegendes VUE3-Tutorial: Verwenden Sie Mixins, um Komponentenfunktionen zu erweitern

VUE3-Basis-Tutorial: Verwenden Sie Mixins, um Komponentenfunktionen zu erweitern

Mit der Entwicklung der Front-End-Entwicklung wurden immer mehr Front-End-Frameworks entwickelt, und VUE ist auch eines der besten. VUE3 bietet Entwicklern viele Vorteile wie schnellere und bessere Leistung, bessere SSR-Unterstützung und einfachere Entwicklungsmethoden für Vue-Komponenten. In diesem Artikel wird erläutert, wie Sie Mixins in VUE3 verwenden, um die Funktionalität von Komponenten zu erweitern.

Was sind Mixins?

Mixins sind eine Möglichkeit, Code wiederzuverwenden und Logik zwischen mehreren Komponenten zu teilen. Es handelt sich um ein normales Javascript-Objekt, das beliebige Komponentenoptionen enthalten kann. Wenn eine Komponente Mixins verwendet, werden alle Optionen der Mixins in die eigenen Optionen der Komponente „gemischt“.

In VUE2 ist die Art und Weise, Mixins zu verwenden, wie folgt:

// 定义一个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]
}

In VUE3 ist die Art und Weise, Mixins zu verwenden, etwas anders:

// 定义一个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]
})

Wie aus den beiden obigen Beispielen ersichtlich ist, ist die Art und Weise, Mixins in VUE3 zu verwenden, folgende fast das Gleiche wie VUE2. Verwenden Sie einfach defineComponent anstelle des vorherigen Vue.component. 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

Verwenden Sie Mixins, um Komponentenfunktionen zu erweitern

In der tatsächlichen Entwicklung wird die Rolle von Mixins immer offensichtlicher. Es kommt häufig vor, dass mehrere Komponenten dieselbe Logik haben. In diesem Fall können Mixins verwendet werden, um diese Logiken einfach zu extrahieren und zwischen mehreren Komponenten zu teilen.

Definieren Sie zunächst ein Mixins in der Datei mixins.js. Hier ist die Pulldown-Aktualisierung als Beispiel: 🎜rrreee🎜Die oben genannten Methoden sind für die Pulldown-Aktualisierung verfügbar Extrahieren Sie sie und fügen Sie sie in ein Mixins mit dem Namen Refresh ein. 🎜🎜Jetzt können wir Refresh-Mixins in der Komponente einführen, die die Pulldown-Aktualisierungsfunktion verwenden muss, wie unten gezeigt: 🎜rrreee🎜Im obigen Code fügen wir eine Komponente mit dem Namen hinzu mixins-Attribute führen Refreshmixins in die Komponente ein, um die Funktionalität der Komponente zu erweitern. Zu diesem Zeitpunkt verfügt die Komponente bereits über die Pulldown-Aktualisierungsfunktion, und andere Attribute und Methoden außer dem Attribut mixins können ebenfalls normal verwendet werden. 🎜🎜Zusammenfassung🎜🎜Dieser Artikel stellt vor, wie man die Funktionalität von Komponenten durch Mixins in VUE3 erweitert. Mixins sind eine Möglichkeit, Code wiederzuverwenden und Logik zwischen mehreren Komponenten zu teilen. Wenn eine Komponente Mixins verwendet, werden alle Optionen der Mixins in die eigenen Optionen der Komponente „gemischt“. Durch die Verwendung von Mixins können wir wiederverwendbaren Logikcode extrahieren und die Wartbarkeit und Wiederverwendbarkeit von Komponenten verbessern. 🎜

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden Sie Mixins, um Komponentenfunktionen zu erweitern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!