vue——插槽slot的学习与使用

Slot

介绍：
插槽就是子组件提供给父组件使用的一个占位符，用 表示，父组件可以向这个占位符中填充任何的自定义内容。

1.普通插槽：

具名插槽就正常使用，没有别的要求

//父组件
<mySon>
//子组件里面有slot标签自定义的内容才有效
<p>我是父组件</p>
</mySon>

//子组件
<div>
<p>我是子组件</p>
<slot>
//父组件自定义的内容在这里面显示

<p>如果父组件不填充内容，就显示这里</p>
</slot>
</div>

2.具名插槽：

子组件设置多个插槽（slot标签），放在不同的位置，添加name属性进行命名区分，父组件根据v-slot绑定参数值，向对应的slot填充内容。

//父组件
<mySon>
//子组件里面有slot标签自定义的内容才有效
//v-slot只能用在template标签上
<template v-slot:header>
<p >我是父组件—header</p>
</template >

<template v-slot:body>
<p >我是父组件—body</p>
</template >

//<template v-slot:footer>
//<p >我是父组件—footer</p>
//</template >
//也可以使用简写，用#代替v-slot：
<template #header>
<p >我是父组件—header</p>
</template >
</mySon>

//子组件
<div>
<p>我是子组件</p>
<slot name="header">
//父组件自定义的内容在这里面显示
</slot>

<slot name="body">
//父组件自定义的内容在这里面显示
</slot>

<slot name="footer">
//父组件自定义的内容在这里面显示
</slot>
</div>

3.作用域插槽：

填充的内容（样式）由父组件提供，组件要用的数据可以使用子组件提供的也可以使用父组件内的数据。
前面两种插槽用不了子组件里面的组件。

//父组件
<mySon>
//子组件里面有slot标签自定义的内容才有效
//设置slotProps来接受子组件的数据,slotProps是一个对象，包含所有的prop 
<template v-slot:header="slotProps">
<p >我是父组件—header</p>
<span>{{slotProps.scope}}</span>
</template >

<template v-slot:body="slotProps">
<p >我是父组件—body</p>
<span>{{slotProps.scope}}</span>
</template >

<template v-slot:footer="slotProps">
<p >我是父组件—footer</p>
<span>{{slotProps.scope}}</span>
</template >

</mySon>
//子组件
<div>
<p>我是子组件</p>
//v-bin:属性="值"
//scope存放传给父组件的数据
<slot name="header" scope="header">
//父组件自定义的内容在这里面显示
<p>header</p>
</slot>

<slot name="body" scope="body">
//父组件自定义的内容在这里面显示
<p>body</p>
</slot>

<slot name="footer" scope="footer">
//父组件自定义的内容在这里面显示
<p>footer</p>
</slot>
</div>