在VUE项目开发中,经常会用到slot插槽,但是刚开始接触vue的小伙伴很容易被文档绕晕,这里仅描述一些自己开发中的小场景,不足之处请多多指教!!
单个 slot
<template>
<button>这是默认显示的内容<slot></slot></button>
</template>
<children>
<span><br />这是分发的内容 <br /></span>
</children>
说明:单个slot时,自动匹配,位置随子组件位置改变
具名slot
<template>
<button>
<slot name="first"></slot>这是默认显示的内容
<slot name="second"></slot>
</button>
</template>
<children>
<span slot="first">
<br />这是分发的内容, first
<br />
</span>
<span slot="second">
<br />这是分发的内容, second
<br />
</span>
</children>
说明:具名slot时,按照名称进行匹配,位置随子组件位置改变,相同名称按父组件位置排列,具名和非具名同时存在是子组件的solt对应所有未具名的父组件slot
slot 传递参数
<slot name="first-btn" :row="scope.row"></slot>
<template slot="first-btn" slot-scope="props">
<el-button @click="btnsss(props.row)">
123
</el-button>
</template>
说明:分发带有参数的slot,在vue2.0中新增了slot-scope属性