什么是插槽?插槽有哪些?如何定义插槽?如何向插槽中传值?
概念:
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。
插槽分为三种:
默认插槽、具名插槽、作用域插槽
一、 默认插槽:
默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中。
用法:
//子组件child
vue.component('child',{
template:'<div>
<p>hello</p>
<slot>**(可在此定义默认内容)**</slot>
</div>'
})
//父组件
<div>
<child>
<p>world</p>//插入slot的内容
</child>
</div>
注意:若是子组件中没有slot,则传入它的任何内容都会被抛弃
二、具名插槽(又称有名插槽):通过 name 属性设置了名字的插槽
具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。
用法:当我们需要多个插槽时,于是有了具名插槽,让插槽位置与插入的内容一 一对应
//父组件
<body-container>
<div slot='header'>
<!-- 我们希望把页头放这里 -->
</div>
<div slot='footer'>
<!-- 我们希望把页脚放这里 -->
</div>
</body-container>
//子组件
<div>
<slot name='header'></slot>
<div>context</div>
<slot name='footer'></slot>
</div>
三、 作用域插槽:
作用域插槽就是带数据的插槽
用法:
//子组件
<div class="box" v-for="item of list" :key="item.id">
<div class="box-title">
<p>
<span>{{item.deNo}}</span>
<!--我们为每个item准备了一个插槽,将item对象作为一个插槽的prop传入-->
<slot class="genre" v-bind:item="item"></slot>
</p>
<p>{{item.deDate}}</p>
</div>
</div>
//父组件
<div>
<!--1.作用域插槽必须是template开头和结尾的内容-->
<!--2.slot-scope="props"声明从子组件传递的数据都放在props里-->
<!--3.加上v-if="props.item!=undefined"判断,防止取不到item的属性-->
<template slot-scope="props" v-if="props.item!=undefined">
<!--告诉子组件模板的信息是以<span>标签的形式-->
<span class="genre">{{props.item.state}}</span>
</template>
</div>