Vue作用域插槽slot-scope實例代碼

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

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

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

（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中指定，類似：

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

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

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

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

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

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

解決辦法很多，不過為了解釋組件作用域插槽，我們就用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:'詢問時間',
   id:12312313123
  },
  {
   test:'代辦1',
   id:123123123423423
  },
  {
   test:'愛你地方年底見覅',
   id:12312313123234234
  },
  {
   test:'時間2',
   id:1231231312323333
  },
  {
   test:'師生情是行情',
   id:12313333333
  }
  ]
 }
 },
 components: {
 todoList
 }
}
</script>

展示效果

步驟

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

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ù)傳遞

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

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

那傳遞步驟是

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

我們之前給數(shù)據(jù)數(shù)據(jù)增加了 isComplete 屬性，現(xiàn)在要將子組件 item 傳遞給插槽,并給父組件暴露數(shù)據(jù)接口 itemValue ，重點在 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ù)判斷條件展示對號元素 -->
  <span v-if="slotProps.itemValue.isComplete">✓</span>
  <!-- 顯示代辦事項名稱 -->
  {{ slotProps.itemValue.test }}
 </template>

</todo-list>

效果如下

附實例代碼：github link

總結

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

<!-- 函數(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: