VUE3 基本チュートリアル: ミックスインを使用してコンポーネント機能を拡張する

VUE3 基本チュートリアル: ミックスインを使用してコンポーネントの機能を拡張する

フロントエンド開発の発展に伴い、ますます多くのフロントエンド フレームワークが開発されていますが、VUE もその中でも最高のものの 1 つです。 VUE3 は、より高速で優れたパフォーマンス、より優れた SSR サポート、より簡単な Vue コンポーネント開発方法など、開発者に多くの利点を提供します。この記事では、VUE3 でミックスインを使用してコンポーネントの機能を拡張する方法を紹介します。

ミックスインとは何ですか?

ミックスインは、コードを再利用し、複数のコンポーネント間でロジックを共有する方法です。これは、任意のコンポーネント オプションを含めることができる通常の JavaScript オブジェクトです。コンポーネントがミックスインを使用する場合、すべてのミックスインのオプションはコンポーネント自体のオプションに「混合」されます。

VUE2 では、ミックスインの使用方法は次のとおりです。

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

VUE3 では、ミックスインの使用方法が少し異なります。

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

上の 2 つの例では、VUE3 でのミックスインの使用方法は、前の Vue.component の代わりに defineComponent が使用されることを除いて、VUE2 の使用方法とほぼ同じです。

ミックスインを使用してコンポーネントの機能を拡張する

実際の開発では、ミックスインの役割がますます明らかになります。複数のコンポーネントに同じロジックが存在する場合は、ミックスインを使用すると簡単にこれらのロジックを抽出し、複数のコンポーネント間で共有できます。

まず、mixins.js ファイルでミックスインを定義します。プルダウン更新の例を次に示します:

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 という名前のミックスインに入れることができます。

これで、以下に示すように、プルダウン更新機能を使用する必要があるコンポーネントに 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 プロパティ以外のプロパティやメソッドも通常どおり使用できます。

概要

この記事では、VUE3 のミックスインを通じてコン​​ポーネントの機能を拡張する方法を紹介します。ミックスインは、コードを再利用し、複数のコンポーネント間でロジックを共有する方法です。コンポーネントがミックスインを使用する場合、すべてのミックスインのオプションはコンポーネント自体のオプションに「混合」されます。ミックスインを使用すると、再利用可能なロジック コードを抽出し、コンポーネントの保守性と再利用性を向上させることができます。

以上がVUE3 基本チュートリアル: ミックスインを使用してコンポーネント機能を拡張するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。