VUE3 basic tutorial: Use mixins to extend component functions

VUE3 Basic Tutorial: Using mixins to expand component functions

With the development of front-end development, more and more front-end frameworks have been developed, and VUE is also one of the best. VUE3 provides developers with many advantages such as faster and better performance, better SSR support, and easier Vue component development methods. This article will introduce how to use mixins in VUE3 to extend the functionality of components.

What are mixins?

Mixins are a way to reuse code and share logic between multiple components. It is a normal javascript object that can contain any component options. When a component uses mixins, all of the mixins' options are "mixed" into the component's own options.

In VUE2, the way to use mixins is as follows:

// 定义一个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, the way to use mixins is slightly different:

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

As can be seen from the above two examples , the way of using mixins in VUE3 is almost the same as that in VUE2, except that defineComponent is used instead of the previous Vue.component.

Use mixins to expand component functions

In actual development, the role of mixins becomes more and more obvious. It is often encountered that multiple components have the same logic. In this case, mixins can be used to easily extract these logics and share them among multiple components.

First, define a mixins in the mixins.js file. Here is an example of pull-down refresh:

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

The above are all the methods used for pull-down refresh. We can Extract it and put it into a mixins named Refresh.

Now, we can introduce Refreshmixins in the component that needs to use the pull-down refresh function, as shown below:

<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>

In the above code, we Add an attribute named mixins to the options and introduce Refreshmixins into the component to extend the functionality of the component. At this time, the component already has the pull-down refresh function, and other properties and methods except the mixins property can also be used normally.

Summary

This article introduces how to extend the functionality of components through mixins in VUE3. Mixins are a way to reuse code and share logic between multiple components. When a component uses mixins, all of the mixins' options are "mixed" into the component's own options. By using mixins, we can extract some reusable logic code and improve the maintainability and reusability of components.

The above is the detailed content of VUE3 basic tutorial: Use mixins to extend component functions. For more information, please follow other related articles on the PHP Chinese website!