В оригинальный слот Vue можно играть

внешний интерфейс JavaScript Vue.js товар

Распределение контента Vue очень подходит для сценария компонентов «фиксированная часть + динамическая часть». Фиксированная часть может быть фиксированной по структуре или фиксированной по логике, например, при загрузке с раскрывающимся списком. , и потянув вниз вызовет операцию извлечения большего количества контента, поэтому мы можем сделать раскрывающееся загрузку плагина со слотом.

сцены, которые будут использоваться

Сцена «потяните вниз, чтобы загрузить больше» появляется относительно больше на мобильной стороне. Мы знаем, что нам нужно прослушивать событие дна для дна и дна, и операция дна одинаковая (переход в фоновый режим для извлечения данных), и алгоритм пейджинга тоже одинаков, так что мы подумаем сделать его компонента, повторно используя те же самые места и позволяя другому этому компоненту совместно использоваться локально, тем самым уменьшая объем кода.
Однако выпадающая загрузка не является полностью переиспользуемым компонентом, потому что содержимое в списке разное, и содержимое пустой страницы (когда содержимого нет) тоже может быть разным. должны учитывать эту «разницу», поэтому мы подумали об использовании для этого слота распределения контента vue. Ниже приведена выпадающая загрузка, которую я сделал во время разработки, вы можете обратиться к ней.

код компонента:

<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 // 每页展示多少条数据
    },
    total: {
      default: 0 // 总共多少条记录
    }
  },
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.addScrollListener()
  },
  methods: {
    addScrollListener() {
      // 添加监听滚动操作，用到函数防抖
      this.scrollFn = Tool.throttle(this.onScroll, 30, 30)
      document.addEventListener('scroll', this.scrollFn, false)
    },
    getList() {
      // 正在拉取数据或者没有数据了，则取消滚动监听
      if(this.isLoading || this.isFirstLoad && (this.page > this.totalPage)) {
        document.removeEventListener('scroll', this.scrollFn, false)
        return
      }
      this.busy = true
      this.isLoading = true
      // 通知父组件去拉取更多数据
      this.$emit("getList", this.page, () => {
        this.isFirstLoad = true
        this.isLoading = false
        this.page++
      }, () => {
        Toast.show('网络错误，请稍后重试')
        this.total = 0
        this.isLoading = false
      })
    },
    reset() {
      // 重新拉取数据
      this.page = 1
      this.total = 0
      this.isLoading = false
      this.isFirstLoad = false
      this.addScrollListener()
      this.getList()
    },
    onScroll() {
      // 到底拉取更多数据 
      if(Tool.touchBottom()) {
        this.getList()
      }
    }
  }
}
</script>

Короче говоря, хотите удовлетворить некоторую относительно фиксированную часть, включая фиксированную операцию или структуру JS или структуру, есть некоторая динамическая часть, мы должны учитывать, следует использовать: компонент + слот.

Неожиданное альтернативное использование слота

Когда я работал над требованиями, я сделал компонент.Компонент разделен на две части, верхнюю и нижнюю части, и эти две части сильно связаны (иначе, как я могу относиться к нему как к компоненту хахаха), как показано на следующем рисунке:

Изначально область С была компонентом, а потом продукт вдруг сказал, что нужно разделить две части, переместить А на позицию С1, а С1 переместить на позицию А (мне стало обидно).
Моя первая идея здесь состоит в том, чтобы разобрать его на два компонента, но здесь возникает проблема.Сцепление этих двух частей раньше было очень высоким.Если его принудительно разобрать на два компонента, то два компонента будут отделены друг от друга , Взаимодействие обязательно будет намного больше. Например, если C1 что-то изменит, это повлияет на C2, тогда C1 должен инициировать событие, чтобы уведомить родительский компонент, а затем родительский компонент вызывает метод C2 для обновления состояния. Такой вид связи между компонентами будет кошмаром в случае частых взаимодействий между компонентами, но мне нужны частые взаимодействия на моей стороне, так что если его разделить на два компонента, нагрузка и сложность сильно возрастут. Конечно, можно подумать о реализации взаимодействия между двумя компонентами через Event Hub, но принципиальная проблема так и не решена по существу.
Итак, есть ли способ переместить позицию, не разбивая ее на две составляющие? Взяв мой пример, распределяя A и B как содержимое C, получается так:

<A></A>
<B></B>
<C></C>

После перехода на слот это выглядит так

<C>
<A slot="c1"></A>
<B slot="c2"></B>
</C>

Таким образом, вы можете настроить позицию, не разделяя модуль C, и выполнить требования с минимальными затратами~~.

Суммировать

Слот Vue можно использовать не только для распространения контента, но и для корректировки позиции. Если вам нужно разделить компоненты для регулировки положения, но вы не хотите разделять компоненты с высокой степенью связи, вы можете рассмотреть возможность использования слота для регулировки положения. Небольшое скромное мнение, надеюсь всем поможет.

Категории