vue中的插槽有三種：單個插槽、具名插槽、作用域插槽，這個在官網(wǎng)上能看到

我們一直強調(diào)做網(wǎng)站、成都網(wǎng)站制作對于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對待,選擇一個安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站設(shè)計公司不一定是大公司,創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

（https://cn.vuejs.org/v2/guide/components.html#單個插槽）

作用域插槽簡單來說就是父組件只管顯示樣式，數(shù)據(jù)由子組件來提供。比如上面的代碼，el-table-column內(nèi)的template是傳遞給其內(nèi)部solt的顯示內(nèi)容，但是scope的值是由el-table-column內(nèi)部solt綁定的數(shù)據(jù)返回的。這個數(shù)據(jù)具體是什么由el-table-column中指定，類似：

export default {
data: function(){
return {
data: ['1','2','3','4','5','6']
}
},
}

而scope就是上面代碼中的data。

昨天看vue的官網(wǎng)文檔，在slot-scope這塊不是特別的明白，今天自己做了一個小例子，便于理解。

先說一下我們假設(shè)的應(yīng)用常用場景，我們已經(jīng)開發(fā)了一個代辦事項列表的組件，很多模塊在用，現(xiàn)在要求在 不影響已測試通過的模塊功能和展示的情況下，給 已完成的代辦項增加一個對勾效果。

也就是說，代辦事項列表組件要滿足一下幾點

1. 之前數(shù)據(jù)格式和引用接口不變，正常展示
2. 新的功能模塊增加對勾

解決辦法很多，不過為了解釋組件作用域插槽，我們就用slot-scope了，寫列一下之前組件的代碼。

todo-list.vue 組件

組件代碼

父組件代碼

展示效果

步驟

為了實現(xiàn)代辦事項增加對勾效果，我們要在data中調(diào)整數(shù)據(jù)結(jié)構(gòu)，新增 todosAfter 數(shù)組,并給每一項增加 isComplete 標(biāo)識。

todosAfter:[
  {
   test:'詢問時間',
   isComplete:true,
   id:12312313123
  },
  {
   test:'代辦1',
   isComplete:false,
   id:123123123423423
  },
  {
   test:'愛你地方年底見覅',
   isComplete:false,
   id:12312313123234234
  },
  {
   test:'時間2',
   isComplete:true,
   id:1231231312323333
  },
  {
   test:'師生情是行情',
   isComplete:true,
   id:12313333333
  }
  ],

理解插槽和數(shù)據(jù)傳遞

自己在看別人的帖子比較吃力的地方就是弄不清楚這個插槽作用域到底是什么，有什么功能，我用大白話來屢屢思路。 弄清楚兩個問題

1. 插槽solt代碼在哪里編寫？ 當(dāng)然在父組件內(nèi)， solt是子組件暴露給父組件的接口，需要父組件傳給子組件 。
2. 插槽作用域，作用域插槽字面理解，僅僅只對插槽生效。

那傳遞步驟是

1. 父組件把數(shù)據(jù)給子組件，父=>子
2. 子組件把數(shù)據(jù)給插槽,并暴露給父組件接口
3. 父組件調(diào)用子組件的插槽slot接口和數(shù)據(jù)

我們之前給數(shù)據(jù)數(shù)據(jù)增加了 isComplete 屬性，現(xiàn)在要將子組件 item 傳遞給插槽,并給父組件暴露數(shù)據(jù)接口 itemValue ，重點在 v-bind:itemValue = "item" 這一句 。

接下來是父組件調(diào)用子組件的slot和 itemValue 數(shù)據(jù)。

之前組件調(diào)用

 

效果如下

附實例代碼：github link

總結(jié)

其實作用域插槽很類似于入?yún)⒑瘮?shù),組件相當(dāng)于cb，而cb的入?yún)⒕拖喈?dāng)與slotProps接收的參數(shù)，只不過名稱和形式變了個樣子。

function foo(str,cb){
 var msg = str + '你好';
 cb(msg);
}

foo('愚坤',function(msg){
 alert(msg)
})

foo('愚坤',function(msg){
 console.log(msg)
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。