什么是插槽?将 slot元素作为承载分发内容的出口。
当子组件有一部分内容是根据父组件传递过来的dom进行显示时,可用slot。
通俗的讲:组件的插槽是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么
//子组件child
vue.component('child',{
template:'<div>
<p>hello</p>
<slot>**(可在此定义默认内容)**</slot>
</div>'
})
//父组件
<div>
<child>
<p>world</p>//插入slot的内容
</child>
</div>
//hello
//world
作用域插槽
<ul>
<slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
slot的默认内容
</slot>
</ul>
<Child>
<template slot="item" slot-scope="props">
<li>{{props.myname}}</li>
</template>
</Child>
//子组件
<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>