网络编程 
首页 > 网络编程 > 浏览文章

Vue.js特性Scoped Slots的浅析

(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )

什么是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.

上面是官方的定义。

作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用。唯一的问题是理解起来比较困难。试图去让你理解父与子作用域的交织关系,像解决一道数学难题。

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

举个简单的例子

//button.vue
<template>
 <button class="btn">
  <slot></slot> //相当于是占位
 </button>
</template>

<script>
export default {

}
</script>
//app.vue
<template>
 <div id="app">
 <Button>Buton with text</Button>
 <Button>
 <i class="fa fa-copy"></i>//这里取代了slot的位置
 </Button>

 <Button>
 <i class="fa fa-user"></i>Profile
 </Button>

 </div>
</template>

<script>
 import Button from './components/Button.vue'
 export default {
 name: 'app',
 components: {
 Button
 }
 }
</script>

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

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

//list.vue
<template>
 <div>
 <slot v-for="item in items"
   :item="item">//这里是slot的占位
 </slot> 
 </div>
</template>
//app.vue
<template>
 <div id="app">
 <List :items="listItems">
  <div slot-scope="row"
  class="list-item1">//这里可以获取到item,item原本是属于List组件内部的。也就是说slot获取了父组件的上下文。
  {{row.item.text}}
 </div>
 </List>
 </div>
</template>

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

named slots

可以直接放到普通标签上面,可以放template标签上

slot里面的作用域是普通标签或者template是一致的。不能访问父组件的作用域。

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

//table.vue
<template>
 <table class="table">
 <thead>
  <slot name="columns">//这里定义了一个slot,名字叫columns,也就是说这里的内容是可以被替换掉的
  <th v-for="column in columns">
   {{column}}
  </th>
  </slot>
 </thead>
 <tbody>
 <tr v-for="item in data">
  <slot :row="item">//这里slot有一个prop是row
  <td v-for="column in columns"
   v-if="hasValue(item, column)">
   {{itemValue(item, column)}}
  </td>
  </slot>
 </tr>
 </tbody>
 </table>
</template>
//app.vue
<template>
 <div id="app">
 <CustomTable :data="tableData" 
   :columns="tableColumns">
 </CustomTable>

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

 <CustomTable :data="tableData">
  <template slot="columns">//这里有一个slot="columns",意思是替换table.vue里面名字叫columns的slot
  <th>Title</th>
  <th>
  <i class="fa fa-images"></i> Image
  </th>
  <th class="actions-row">
  <i class="fab fa-vuejs vue-icon"></i> Actions
  </th>
 </template>

 <template slot-scope="{row}">//这里替换table.vue里面slot为row的内部内容
 <td class="bold-row">
  {{row.title}}
 </td>
 <td class="img-row">
  <img :src="/UploadFiles/2021-04-02/row.img">

Vue.js特性Scoped Slots的浅析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
下一篇:微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap