一: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过程。