说说对slot的理解?slot的使用场景有哪些?

26 阅读1分钟

一:slot是什么?

slot,插槽。可以理解为slot在组件模板中占好了位置,当使用该组件标签的时候,组件标签里面的内容就会自动填坑(替换组件模版中slot位置),作为承载分发内容的出口

二:使用场景

通过插槽可以让用户拓展组件,去更好的复用组件和对其做定制化处理。通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。比如布局组件,表格列,下拉选项,弹框显示内容等。

三:分类

三种:默认插槽,具名插槽,作用域插槽
小结:
v-slot属性只能在<template>上使用,但是只有默认插槽时可以在组件标签上使用。 默认插槽名为default,可以省略default直接写v-slot 缩写为#时不能不写参数,写成#default 可以通过解构获取v-slot={user},还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"

四:原理分析

slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过template-->render function -->VNode -->DOM过程。

参考网站:mp.weixin.qq.com/s?__biz=MzU…