VUE3 기본 튜토리얼: 믹스인을 사용하여 컴포넌트 기능 확장

VUE3 기본 튜토리얼: 믹스인을 사용하여 컴포넌트 기능 확장

프론트엔드 개발이 발전하면서 점점 더 많은 프론트엔드 프레임워크가 개발되었으며 VUE도 최고 중 하나입니다. VUE3는 개발자에게 더 빠르고 더 나은 성능, 더 나은 SSR 지원, 더 쉬운 Vue 구성 요소 개발 방법과 같은 많은 이점을 제공합니다. 이 기사에서는 VUE3에서 믹스인을 사용하여 구성 요소의 기능을 확장하는 방법을 소개합니다.

믹스인이 무엇인가요?

Mixins는 코드를 재사용하고 여러 구성 요소 간에 논리를 공유하는 방법입니다. 이는 모든 구성 요소 옵션을 포함할 수 있는 일반적인 자바스크립트 개체입니다. 구성 요소가 믹스인을 사용하면 모든 믹스인의 옵션이 구성 요소의 자체 옵션에 "혼합"됩니다.

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]
})

위 두 예에서 볼 수 있듯이 VUE3에서 믹스인을 사용하는 방법은 다음과 같습니다. VUE2와 거의 동일합니다. 이전 Vue.comComponent 대신 defineComponent를 사용하세요. 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

믹스인을 사용하여 컴포넌트 기능 확장

실제 개발에서 믹스인의 역할은 점점 더 분명해지고 있습니다. 여러 구성 요소가 동일한 논리를 갖는 경우가 종종 있습니다. 이 경우 믹스인을 사용하면 이러한 논리를 쉽게 추출하고 여러 구성 요소 간에 공유할 수 있습니다.

먼저 mixins.js 파일에 믹스인을 정의합니다. 다음은 풀다운 새로고침의 예입니다. 🎜rrreee🎜위는 풀다운 새로고침에 사용되는 모든 방법입니다. 이를 추출하여 Refresh라는 믹스인에 넣습니다. 🎜🎜이제 아래와 같이 풀다운 새로 고침 기능을 사용해야 하는 컴포넌트에 Refresh 믹스인을 도입할 수 있습니다. 🎜rrreee🎜위 코드에서 라는 컴포넌트를 추가합니다. mixins 속성을 ​​사용하면 구성 요소에 Refresh믹스인을 도입하여 구성 요소의 기능을 확장할 수 있습니다. 이때 해당 컴포넌트에는 이미 풀다운 새로 고침 기능이 있으며, mixins 속성을 ​​제외한 다른 속성 및 메소드도 정상적으로 사용할 수 있습니다. 🎜🎜요약🎜🎜이 글에서는 VUE3에서 믹스인을 통해 컴포넌트의 기능을 확장하는 방법을 소개합니다. 믹스인은 코드를 재사용하고 여러 구성 요소 간에 논리를 공유하는 방법입니다. 구성 요소가 믹스인을 사용하면 모든 믹스인의 옵션이 구성 요소의 자체 옵션에 "혼합"됩니다. 믹스인을 사용하면 재사용 가능한 논리 코드를 추출하고 구성 요소의 유지 관리성과 재사용성을 향상시킬 수 있습니다. 🎜

위 내용은 VUE3 기본 튜토리얼: 믹스인을 사용하여 컴포넌트 기능 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!