插槽(slot)的概念很简单,其实就是分发内容。
插槽分为:普通插槽、作用域插槽、默认插槽
插槽的作用:传递复杂内容的方式
作用域插槽的函数理解:
作用域插槽则可以理解为,本质上是返回组件的函数,我们可以把下面一整段标签当成是一个函数:
<template v-slot:suf-icon="{ value }">
<span>后置图标 - {{ value }}</span>
</template>
然后我们在组件的内部通过`slot`的形式,去调用这个函数,并且给这个函数传递了一个 value 值:slot: templateFunction(value),在这个函数内,我们可以根据传递的 value 值来指定各种操作,如:函数返回了一个 span 标签,并在其中显示 value 值。
当然我们也可以做其他各种各样的事情,譬如判断 value 值,再来返回我们想要返回的内容:
<span v-if="value">哈哈哈啊我显示了</span>
或者骚包一点动态绑定样式:
<span :class="value">我显示颜色是{{ value }}了!</span>