這篇文章主要介紹Vue作用域插槽的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、尋甸網(wǎng)絡(luò)推廣、成都微信小程序、尋甸網(wǎng)絡(luò)營銷、尋甸企業(yè)策劃、尋甸品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供尋甸建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

作用域插槽不是那么直觀的一個(gè)概念。Vue文檔使用了一段描述性的話來解釋作用域插槽：

有的時(shí)候你希望提供的組件帶有一個(gè)可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽
……
但是在我們應(yīng)用的某些部分，我們希望每個(gè)獨(dú)立的待辦項(xiàng)渲染出和 todo.text 不太一樣的東西。這也是作用域插槽的用武之地。

但在我看來，至少是第一次讀到的時(shí)候，這段話相當(dāng)不好理解。插槽不是分發(fā)內(nèi)容到子組件嗎，為什么還要從子組件中獲取數(shù)據(jù)？不是已經(jīng)有了通過emit事件的方法從子組件向父組件傳遞數(shù)據(jù)嗎，為什么需要它？作用域插槽到底是來干嘛的？……

在瀏覽了不少博客、自己思考“如果不這么做，就會(huì)怎么樣”再動(dòng)手實(shí)踐之后，作用域插槽的含義才逐漸明了。其實(shí)作用域插槽提供了一種封裝可復(fù)用組件的新思路。下面我會(huì)從最簡單的例子開始。

簡單的展示列表

現(xiàn)在我們做一個(gè)純展示用途的列表組件，如下圖所示：

第一個(gè)例子先用slot來分發(fā)內(nèi)容

在父組件中使用MyList

省略了其中的樣式代碼，結(jié)果如圖所示

滿足了基本的需求，但是作為組件的使用者，這樣的一個(gè)組件會(huì)讓我覺得非常麻煩，content中循環(huán)的邏輯還需要我自己動(dòng)手來寫，這樣的使用毫無便利性。于是有了下面第二個(gè)版本

使用prop來傳遞數(shù)據(jù)

因?yàn)榭紤]到列表的內(nèi)容總是一個(gè)數(shù)組，我把循環(huán)結(jié)構(gòu)寫進(jìn)了組件中

列表組件第二版：

使用起來也非常方便，只需通過prop將數(shù)據(jù)傳入組件中

改進(jìn)之后，每當(dāng)我使用組件只需一行代碼，大大簡化了工作量

易用性的需求也滿足了，但現(xiàn)在又有了新的問題，組件的拓展性不好！每次只能生成相同結(jié)構(gòu)的列表，一旦業(yè)務(wù)需求發(fā)生了變化，組件就不再適用了。比如我現(xiàn)在有了新的需求，在一個(gè)列表的每個(gè)列表項(xiàng)前加入了一個(gè)小logo，我總不可能又寫一個(gè)新的組件來適應(yīng)需求的變化吧？假如需要更多的定制化場景呢？

作用域插槽

這里就有了第三版的列表組件，使用作用域插槽將子組件中的數(shù)據(jù)傳遞出去 

使用組件時(shí)，將業(yè)務(wù)所需的content模板傳入

  
  
   
    {{scope.item.prefix ? '有前綴' : '無前綴'}}
    {{scope.item.text}}
    {{scope.item.remark}}