vue中slot內(nèi)容分發(fā)的示例分析

小編給大家分享一下vue中slot內(nèi)容分發(fā)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

vue的內(nèi)容分發(fā)非常適合“固定部分+動(dòng)態(tài)部分”的組件的場(chǎng)景，固定部分可以是結(jié)構(gòu)固定，也可以是邏輯固定，比如下拉loading，下拉loading只是中間內(nèi)容是動(dòng)態(tài)的，而拉到底部都會(huì)觸發(fā)拉取更多內(nèi)容的操作，因此我們可以把下拉loading做成一個(gè)有slot的插件。

單個(gè)Slot

在children這個(gè)標(biāo)簽里面放Dom，Vue不會(huì)理你，也就是不會(huì)顯示，類(lèi)似React：this.props.children。

//父
<children> 
  <span>12345</span>//這邊不會(huì)顯示
</children>

//子
components: {
  children: {
    template: "<button>為了明確作用范圍，所以使用button標(biāo)簽</button>"
  }
}

你需要寫(xiě)成這樣

children: {
  template: "<button><slot></slot>為了明確作用范圍，所以使用button標(biāo)簽</button>" 
}

注意這邊 slot 相當(dāng)于一個(gè)坑，等著父組件給填上，這邊 slot 代表的就是上面的 span

多個(gè)Slot

這邊需要加name屬性，說(shuō)白了，多個(gè)Slot就不像上面單個(gè)，需要有個(gè)對(duì)應(yīng)關(guān)系。

父-> slot="name1"
子-> <slot name="name1"

//父
<children> 
  <span slot="name1">12345</span>
</children>

//子
components: {
  children: {
    template: "<button>
            <slot name="name1"></slot>
            button標(biāo)簽
          </button>"
  }
}

這邊寫(xiě)了一個(gè)name1，如果有多個(gè)，就插多個(gè)，比較簡(jiǎn)單。

使用場(chǎng)景

“下拉加載更多”的場(chǎng)景在移動(dòng)端相對(duì)來(lái)說(shuō)出現(xiàn)得比較多。我們知道下拉觸底都要監(jiān)聽(tīng)觸底事件，觸底的操作也相同（去后臺(tái)拉取數(shù)據(jù)），分頁(yè)算法也相同，因此我們會(huì)想到把它做成一個(gè)組件，重用這些相同的地方，讓其他地方可以共用這個(gè)組件，從而減少代碼量。

然而，下拉loading并不是一個(gè)可以完全重用的組件，因?yàn)榱斜砝锩娴膬?nèi)容不同，空白頁(yè)（沒(méi)有內(nèi)容時(shí)）的內(nèi)容也可能不同，如果要做成組件，那么就要考慮到這方面的“不同”，因此我們想到利用vue的內(nèi)容分發(fā)slot來(lái)做。下面是本人在開(kāi)發(fā)的時(shí)候做的一個(gè)下拉loading，大家可以參考下。

組件代碼：

<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 // 每頁(yè)展示多少條數(shù)據(jù)
  },
  total: {
   default: 0 // 總共多少條記錄
  }
 },
 computed: {
  totalPage() {
   return Math.ceil(this.total / this.pageSize)
  }
 },
 created() {
  this.getList()
 },
 mounted() {
  this.addScrollListener()
 },
 methods: {
  addScrollListener() {
   // 添加監(jiān)聽(tīng)滾動(dòng)操作，用到函數(shù)防抖
   this.scrollFn = Tool.throttle(this.onScroll, 30, 30)
   document.addEventListener('scroll', this.scrollFn, false)
  },
  getList() {
   // 正在拉取數(shù)據(jù)或者沒(méi)有數(shù)據(jù)了，則取消滾動(dòng)監(jiān)聽(tīng)
   if(this.isLoading || this.isFirstLoad && (this.page > this.totalPage)) {
    document.removeEventListener('scroll', this.scrollFn, false)
    return
   }
   this.busy = true
   this.isLoading = true
   // 通知父組件去拉取更多數(shù)據(jù)
   this.$emit("getList", this.page, () => {
    this.isFirstLoad = true
    this.isLoading = false
    this.page++
   }, () => {
    Toast.show('網(wǎng)絡(luò)錯(cuò)誤，請(qǐng)稍后重試')
    this.total = 0
    this.isLoading = false
   })
  },
  reset() {
   // 重新拉取數(shù)據(jù)
   this.page = 1
   this.total = 0
   this.isLoading = false
   this.isFirstLoad = false
   this.addScrollListener()
   this.getList()
  },
  onScroll() {
   // 到底拉取更多數(shù)據(jù) 
   if(Tool.touchBottom()) {
    this.getList()
   }
  }
 }
}
</script>

總之，遇到一些有想對(duì)比較固定的部分，包括js操作或者結(jié)構(gòu)固定，又有一些動(dòng)態(tài)的部分，我們應(yīng)該就應(yīng)該考慮到使用：組件+slot。

意向不到的slot另類(lèi)用法

我在做需求的時(shí)候，做了一個(gè)組件，該組件分為上下兩個(gè)部分，這兩個(gè)部分耦合度很高（不然我怎么把它當(dāng)成一個(gè)組件呢哈哈哈），如下圖所示：

本來(lái)C區(qū)域是一個(gè)組件，然后產(chǎn)品突然說(shuō)，需要把這兩個(gè)部分分開(kāi)，把A移到C1的位置，C1移到A的位置（心里感覺(jué)到憋屈）。

這里我的第一個(gè)想法就是拆開(kāi)來(lái)做成兩個(gè)組件，但是問(wèn)題來(lái)了，之前這兩部分的耦合度很高，如果強(qiáng)制把它拆開(kāi)成兩個(gè)組件，那么這兩個(gè)組件之間的交互必然會(huì)多很多。比如，C1改變了某個(gè)東西會(huì)影響到C2，那么C1需要觸發(fā)事件通知父組件，父組件再調(diào)用C2的某個(gè)方法來(lái)更新?tīng)顟B(tài)。這種跨組件之間的通訊在組件之間頻繁交互的情況下，將會(huì)是噩夢(mèng)，而我這邊卻需要頻繁的交互，所以如果把它拆分為兩個(gè)組件，那么工作量和復(fù)雜度將會(huì)大大的增加。當(dāng)然，你可以想到通過(guò)Event Hub的方式來(lái)實(shí)現(xiàn)兩個(gè)組件之間的交互，但是根本問(wèn)題還是沒(méi)有實(shí)質(zhì)性得得到解決。

那么，有什么方法可以做到不拆分成兩個(gè)組件又能移動(dòng)位置的方法呢，答案就是slot。以我的例子為例，把A和B作為C的內(nèi)容分發(fā)，原來(lái)是這樣的:

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

改為slot以后是這樣的

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

這樣就能做到不把C模塊拆分，又能調(diào)整位置了，以最小的代價(jià)完成需求~~。

以上是“vue中slot內(nèi)容分發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！