Content distribution of VUE is very suitable for the scenario of “fixed part + dynamic part” components. The fixed part can be structurally or logically fixed, such as pulldown loading, in which the middle content is dynamic, while pulling to the bottom will trigger the operation of pulling more content. So we can make drop-down loading a plugin with slots.

Usage scenarios

The “pull down load more” scenario is relatively common on mobile. We knew that a drop-down bottom would listen for a bottom event, that the bottom operation would be the same (to pull data in the background), and that the paging algorithm would be the same, so we thought of making it a component, reusing those same things so that other places could share the component and reduce the amount of code. However, dropdown loading is not a fully reusable component, because the contents of the list can be different, and the contents of the blank page (when there is no content) can be different. If we want to make a component, we need to consider this “difference”, so we thought of using vue content distribution slot to do this. The following is a drop-down loading I did during development for your reference.

Component code:

<template>
  <div>
    <slot name="list" v-if="total > 0"></slot>
    <slot name="empty" v-else></slot>
  </div>
</template>
<script>
import Toast from 'lib/xl-toast'

import Tool from 'tool/tool'

export default {
  data() {
    return {
      page: 1,
      isLoading: false,
      busy: false,
      isFirstLoad: false}}, props: {pageSize: {default: 10 // How many records per page}, total: {default: 0 // How many records in total}}, computed: {totalPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.addScrollListener()
  },
  methods: {
    addScrollListener() {/ / add to monitor rolling operation, the use function stabilization enclosing scrollFn = Tool. The throttle (this onScroll, 30, 30) document. The addEventListener ('scroll', this.scrollFn, false)},getList() {// Pull data or no data, cancel the scroll listenerif(this.isLoading || this.isFirstLoad && (this.page > this.totalPage)) {
        document.removeEventListener('scroll', this.scrollFn, false)
        return
      }
      this.busy = true
      this.isLoading = true// Tell the parent to pull more data this.$emit("getList", this.page, () => {
        this.isFirstLoad = true
        this.isLoading = false
        this.page++
      }, () => {
        Toast.show('Network error, please try again later')
        this.total = 0
        this.isLoading = false})},resetThis.page = 1 this.total = 0 this.isloading = () {// pull data this.page = 1 this.total = 0 this.isloading =false
      this.isFirstLoad = false
      this.addScrollListener()
      this.getList()
    },
    onScroll() {// finally pull more dataif(Tool.touchBottom()) {
        this.getList()
      }
    }
  }
}
</script>

Copy the code

In general, we should consider using component +slot when dealing with fixed parts, such as fixed JS operations or structures, and dynamic parts.

Unexpected alternative use of slot

When I was doing the requirements, I made a component that was divided into two highly coupled parts (how else would I call it a component hahaha), as shown below:





<A></A>
<B></B>
<C></C>
Copy the code

After changing to slot, it looks like this

<C>
<A slot="c1"></A>
<B slot="c2"></B>
</C>
Copy the code

This can do not split the C module, and can adjust the position, with the minimum cost to complete the demand ~~.

conclusion

Vue slots can be used not only for content distribution, but also for positioning. If you need to split components for position adjustment but do not want to split highly coupled components, you can use slot for position adjustment. A little ignorance, I hope to help you.