什么是限定范围的插槽

作用域槽是一种特殊类型的槽，其功能是作为可重用的模板（可以将数据传递给它),而不是已经呈现的元素。

上面是官方的定义。

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

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

举个简单的例子

//按钮。vuetemplate按钮class=' BTN '插槽/插槽//相当于是占位/Button/templatescriptexport默认{ }/script//app。vuetemplate div id=' app '带文本的按钮打开/按钮I class=' fa-copy '/I//这里取代了狭槽的位置/Button Button I class=' fa-user '/iProfile/Button/div/模板脚本从导入按钮。/组件/按钮。vue ' export default { name : ' app '，components 3360 { Button } }/script slot其实就是一个占位，button.vue的狭槽位置会被app.vue里面的替换了。

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

//列表。vuetemplate div插槽v-for=' items in items ' : item=' item '//这里是狭槽的占位/slot/div/template//app。vuetemplate div id=' app ' List : items=' List items ' div slot-scope=' row ' class=' List-item 1 '//这里可以获取到项目，项目原本是属于目录组件内部的。也就是说狭槽获取了父组件的上下文{ { row。项目。文本} }/div/列表/div/模板解释见上面代码注释。注意一点的是slot-scope="row "这里的名字（行)是可以任意取的。

命名插槽

可以直接放到普通标签上面，可以放模板标签上

狭槽里面的作用域是普通标签或者模板是一致的。不能访问父组件的作用域。

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

//表格。vuetemplate table class=' table '插槽名称='columns'//这里定义了一个插槽，名字叫列，也就是说这里的内容是可以被替换掉的第{列}}列中的第v-for='列/第/槽/和第tbody tr v-for='数据项'槽：行='数据项'//这里狭槽有一个支柱是行TD v-for=' columns ' v-if='有值(项，列)' {{itemValue(项，列)} }/TD/slot/tr/t body/table/template//app。vuetemplate div id=' app ' custom table : data=' table data ' : columns=' table columns '/custom table div class=' table-separator '/div custom table : data=' table data '模板槽=' columns '//这里有一个插槽='列，意思是替换table.vue里面名字叫列的插槽THTItle/th I class=' fa fa-images '/I Image/th I class=' Actions-row ' I class=' fab fa-vuejs vue-icon '/I Actions/th/模板模板slot-scope=“{ row }”//这里替换table.vue里面狭槽为排的内部内容TD class=' bold-row ' { row。title } }/TD TD class=' img-row ' img : src=' http : row。img '/TD TD TD class=' actions-row ' Button @ click。native=' handleAction(' Edit ')I class=' fa fa fa-Edit '/I/Button @ click。native=' handleAction(' Delete ')type=' dance ' I class=' fa fa fa-trash '/I/Button/TD/template/custom table/div/template(

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