vue中slot插槽

插槽就是vue实现的一套内容分发的API，将插槽元素作为承载分发内容的出口。

也就是说在组件模板中默认占用一个位置，当使用组件标签时候，组件标签的内容就会自动替换掉内容

slot中可以设置一些默认的内容，如果传递了内容则会替换掉，如果没有名字的标签会默认放到default中。

例如：没有插槽时候，组件内发布的一些内容是不起作用的，加了插槽就起作用了

   <div id="app">
       <modal><h2>是否删除</h2></modal>
       <modal><span>确认内容</span></modal>  
    </div>
    <template id="modal">
      <div>
        <slot></slot>
      </div>
    </template>

 let modal = {
    template:'#modal'
   }
   let vm = new Vue({
    el:'#app',
    components:{
      modal
    }
   });

 

自定义slot:

1、子组件必须为双标签

2、子组件内写上自定义的结构或样式，且加上slot的属性（该属性要对应默认slot的名字）

3、在子组件中包一个slot的元素，可以任意修改。在slot元素上定义一个name属性，为了更好的对应操作

 

<slot name="title">默认标题</slot>
<slot name="content">默认内容</slot>
<slot name="default">这是一个默认标题</slot>

对应的插槽和内容相对应

<div id="app">
       <modal><span slot="title">是否删除</span><p slot="content">确认删除吗？</p></modal> 
</div>