Vuejs08--slot插槽

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>