Vue插槽slot如何使用
导读:本文共2703字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:这篇文章主要介绍“Vue插槽slot如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue插槽slot如何使用”文章能帮助大家解决问题。一、插槽(slot)是什么slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件例子://... ...
目录
(为您整理了一些要点),点击可以直达。这篇文章主要介绍“Vue插槽slot如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue插槽slot如何使用”文章能帮助大家解决问题。
一、插槽(slot)是什么
slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式,适用于父组件===>子组件
例子:
//父组件中<Category> <div>html结构</div></Category>//子组件中:<template> <div> <slot>插槽的默认内容</slot> </div></template>
二、使用场景
通过插槽可以让用户拓展组件,去更好地复用组件和对其做定制化处理;
如果父组件在使用到一个复用组件的时候,这个组件在不同的地方有少量的更改,如果去重写组件是很浪费,这时,通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。
比如:布局组件、表格列、下拉选项、弹框显示内容等。
三、slot的分类
默认插槽
子组件用<slot>
来标记渲染的位置,在父组件的自定义标签中写slot中的结构。如果在子组件的<slot>
中写了结构,那么会作为默认显示的内容。
//父组件(数据在父组件中)<template><divid="app"><Categorytitle="美食"><ul><liv-for="(item,key)infoods":key="key">{{item}}</li></ul></Category><Categorytitle="游戏"><ul><liv-for="(item,key)ingames":key="key">{{item}}</li></ul></Category><Categorytitle="电影"></Category></div></template>//子组件<template><divclass="category"><h4>{{title}}分类</h4><slot>默认显示内容</slot></div></template>
效果:
具名插槽
为每个slot标记名字,也是处理具有多个插槽时的对应关系,标记名字的方法有两个:
方法1:
//父组件<Categorytitle="美食"><ulslot="foods"><liv-for="(item,key)infoods":key="key">{{item}}</li></ul></Category>//子组件<h4>{{title}}分类</h4><slotname="foods">默认显示内容</slot>/*给插槽取名*/
方法2:此时必须标记在template标签上
<templatev-slot:foods><ul><liv-for="(item,key)infoods":key="key">{{item}}</li></ul></template>
作用域插槽
当元素在子组件中时,想实现上述操作,就会造成数据获取不到的问题,这时就可以使用作用域插槽,作用域这三个字就体现在数据的作用域上。
//父组件<template><divid="app"><Categorytitle="美食"><templatescope="foods"><ul><liv-for="(item,key)infoods.foods":key="key">{{item}}</li></ul></template></Category><Categorytitle="美食"><templatescope="foods"><!--<templateslot-scope="foods">--><ol><liv-for="(item,key)infoods.foods":key="key">{{item}}</li></ol></template></Category></div></template>//子组件:数据在子组件中<template><divclass="category"><h4>{{title}}分类</h4><slot:foods="foods">默认显示内容</slot></div></template>
可以通过解构获得slot-scope={foods},还可以重命名slot-scope={new:foods}
四、介绍对slot的理解
回答:slot就是插槽,主要的作用就是拓展组件,在重复使用一个组件的时候可以通过少量的修改就达到复用的效果。分成默认插槽、具名插槽和作用域插槽。其中前两个都是元素在父组件中,拓展的结构也在父组件中,直接在子组件中占位,在父组件中添加结构即可,区别就是具名插槽给插槽取了名字,多个插槽存在时可以一一对应。而作用域插槽的数据在子组件中,扩展的结构要在父组件中,这是就要利用slot进行子===>父的通信,给数据一个新的作用域,因此叫做作用域插槽。
关于“Vue插槽slot如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
Vue插槽slot如何使用的详细内容,希望对您有所帮助,信息来源于网络。