开始学习Vue.js特性--Scoped Slots

Posted 前端手艺人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了开始学习Vue.js特性--Scoped Slots相关的知识,希望对你有一定的参考价值。

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 开始学习Vue.js特性--Scoped Slots

什么是scoped slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

上面是官方的定义。

简单点说slot就是插槽,它是可以被替换掉的,替换它的内容是可以拿到当前组件的上下文的 (为了简单起见,以下例子以模板为主)

举个简单的例子

 
   
   
 
  1. //button.vue

  2. <template>

  3.   <button class="btn">

  4.      <slot></slot>  //相当于是占位

  5.   </button>

  6. </template>

  7. <script>

  8. export default {

  9. }

  10. </script>

  11. //app.vue

  12. <template>

  13. <div id="app">

  14.  <Button>Buton with text</Button>

  15.  <Button>

  16.    <i class="fa fa-copy"></i>//这里取代了slot的位置

  17.  </Button>

  18.  <Button>

  19.    <i class="fa fa-user"></i>Profile

  20.  </Button>

  21. </div>

  22. </template>

  23. <script>

  24. import Button from './components/Button.vue'

  25. export default {

  26.    name: 'app',

  27.  components: {

  28.   Button

  29.  }

  30.  }

  31. </script>

slot其实就是一个占位,button.vue的slot位置会被app.vue里面的替换了。

开始学习Vue.js特性--Scoped Slots

复杂例子1:slot内的东西可以获取父组件的上下文信息

 
   
   
 
  1. //list.vue

  2. <template>

  3.  <div>

  4.    <slot v-for="item in items"

  5.          :item="item">//这里是slot的占位

  6.    </slot>

  7.  </div>

  8. </template>

 
   
   
 
  1. //app.vue

  2. <template>

  3. <div id="app">

  4.   <List :items="listItems">

  5.      <div slot-scope="row"

  6.        class="list-item1">//这里可以获取到item,item原本是属于List组件内部的。也就是说slot获取了父组件的上下文。

  7.        {{row.item.text}}

  8.    </div>

  9.   </List>

  10. </div>

  11. </template>

解释见上面代码注释。注意一点的是slot-scope="row" 这里的名字(row)是可以任意取的。

复杂例子2:slot里面是可以放东西的,是默认的模板,可被替换。

 
   
   
 
  1. //table.vue

  2. <template>

  3.  <table class="table">

  4.   <thead>

  5.      <slot name="columns">//这里定义了一个slot,名字叫columns,也就是说这里的内容是可以被替换掉的

  6.        <th v-for="column in columns">

  7.          {{column}}

  8.        </th>

  9.      </slot>

  10.    </thead>

  11.    <tbody>

  12.    <tr v-for="item in data">

  13.      <slot :row="item">//这里slot有一个prop是row

  14.        <td v-for="column in columns"

  15.            v-if="hasValue(item, column)">

  16.            {{itemValue(item, column)}}

  17.        </td>

  18.      </slot>

  19.    </tr>

  20.    </tbody>

  21.  </table>

  22. </template>

  23. //app.vue

  24. <template>

  25. <div id="app">

  26.   <CustomTable :data="tableData"

  27.           :columns="tableColumns">

  28.   </CustomTable>

  29.     <div class="table-separator"></div>

  30.   <CustomTable :data="tableData">

  31.     <template slot="columns">//这里有一个slot="columns",意思是替换table.vue里面名字叫columns的slot

  32.      <th>Title</th>

  33.     <th>

  34.      <i class="fa fa-images"></i> Image

  35.     </th>

  36.     <th class="actions-row">

  37.      <i class="fab fa-vuejs vue-icon"></i> Actions

  38.     </th>

  39.    </template>

  40.   <template slot-scope="{row}">//这里替换table.vue里面slot为row的内部内容

  41.    <td class="bold-row">

  42.      {{row.title}}

  43.    </td>

  44.    <td class="img-row">

  45.       <img :src="row.img">

  46.    </td>

  47.    <td class="actions-row">

  48.      <Button @click.native="handleAction('Edit')">

  49.       <i class="fa fa-edit"></i>

  50.      </Button>

  51.     <Button @click.native="handleAction('Delete')" type="danger">

  52.       <i class="fa fa-trash"></i>

  53.      </Button>

  54.    </td>

  55.   </template>  

  56.   </CustomTable>

  57. </div>

  58. </template>

以上就是今天的内容,感谢阅读。欢迎留言交流。

详细代码:https://codesandbox.io/s/pjl4q7xr30?from-embed

原文链接,请点击阅读原文

以上是关于开始学习Vue.js特性--Scoped Slots的主要内容,如果未能解决你的问题,请参考以下文章

使用 v-slot (scoped-slot) 时访问 this.$slots

vue.js单个slot

Vue学习笔记入门篇——组件的内容分发(slot)

Vue学习

Vue.js-----轻量高效的MVVM框架(十一使用slot分发内容)

带有函数调用的 vue.js 单元测试 v-slot