Vue作用域插槽slot-scope實(shí)例代碼

更新時(shí)間：2018年09月05日 08:28:36 作者：愚坤

這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

<slot name="**" :data="data"></slot>
export default {
data: function(){
return {
data: ['1','2','3','4','5','6']
}
},
}

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

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

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

也就是說，代辦事項(xiàng)列表組件要滿足一下幾點(diǎn)

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

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

todo-list.vue 組件

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot v-bind:itemValue = "item" >
   {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

<script>
export default {
 name: 'todoList',
 props: {
 todos: Array
 },
 data(){
 return {
  todoList:this.todos
 }
 }
}
</script>

組件代碼

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot>
  {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

<script>
export default {
 name: 'todoList',
 props: {
 todos: Array
 },
 data(){
 return {
  todoList:this.todos
 }
 }
}
</script>

父組件代碼

<template>
 <div id="app">
 <h2>之前組件調(diào)用</h2>
 <todo-list v-bind:todos="todosBefore" ></todo-list>
 </div>
</template>

<script>
import todoList from './components/todo-list.vue'

export default {
 name: 'app',
 data:function(){
 return {
  todosBefore:[
  {
   test:'詢問時(shí)間',
   id:12312313123
  },
  {
   test:'代辦1',
   id:123123123423423
  },
  {
   test:'愛你地方年底見覅',
   id:12312313123234234
  },
  {
   test:'時(shí)間2',
   id:1231231312323333
  },
  {
   test:'師生情是行情',
   id:12313333333
  }
  ]
 }
 },
 components: {
 todoList
 }
}
</script>

展示效果

步驟

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

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

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

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

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

那傳遞步驟是

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

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

<template>
 <ul>
 <li v-for="item in todoList" v-bind:key="item.id">
  <slot v-bind:itemValue = "item" >
   {{ item.test }} 
  </slot>
 </li>
 </ul>
</template>

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

<h2>之前組件調(diào)用</h2>
<todo-list v-bind:todos="todosAfter">
 <template slot-scope="slotProps">
  <!-- 打印itemvalue數(shù)據(jù)-->
  <div style="background:red; border-bottom:2px solid blue;">
   {{slotProps.itemvalue}}
  </div>
  <!-- 根據(jù)判斷條件展示對(duì)號(hào)元素 -->
  <span v-if="slotProps.itemValue.isComplete">✓</span>
  <!-- 顯示代辦事項(xiàng)名稱 -->
  {{ slotProps.itemValue.test }}
 </template>

</todo-list>

效果如下

附實(shí)例代碼：github link

總結(jié)

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

<!-- 函數(shù) -->
function foo(str,cb){
 var msg = str + '你好';
 cb(msg);
}
<!-- 調(diào)用 -->
foo('愚坤',function(msg){
 alert(msg)
})

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: