slot插槽
当你需要一些其他功能时,可以通过插槽来扩展。让我们封装的组件更具有扩展性
1、默认插槽:
slot 标签定义插槽。使用时在定义的模板标签之间写入的标签会传入到slot(即代替slot)
当在slot标签之间有标签。其为slot的默认值。当有其他标签传递过来时会替代默认值。
<mydiv></mydiv>
<mydiv>
<h1>传入到插槽</h1>
</mydiv>
<template id="mySdiv" >
<div>
<div>插槽测试</div>
<slot>
<button>插槽默认标签</button>
</slot>
</div>
</template>
2、具名插槽
当子组件复杂时,插槽可能很多。当需要设置指定插槽时。
为插槽设置标识 name,在使用时通过slot="solt name"具体的名字给指定的插槽传值
<mydiv>
<div slot="centre">剧名插槽</div>
</mydiv>
<template id="mySdiv" >
<div>
<slot name="left"><span>左边</span></slot>
<slot name="centre"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
3、作用域插槽
父组件替换插槽便签,但内容由子组件来决定。
编译时:子组件只能使用子组件的定义的属性值,父组件只能使用父组件的定义的属性值。
子组件slot 自定义一个属性给其赋值子组件属性值
父组件 使用template的slot-scope="slot名"给’slot名’赋值slot
然后solt.+定义的属性即获取到数据
<div id="app">
<mydiv>
<template slot-scope="slot">
<span>{{slot.cdata}}</span>
</template>
</mydiv>
</div>
<template id="mySdiv" >
<div>
<slot :cdata="cmovies">
</slot>
</div>
</template>