vue插槽

vue的插槽是vue组件中的一个可变区域，通过<slot></slot>标记插槽区域，在网页渲染时，插槽区域将会根据规则被替换。

基本使用

在组件模板中添加<slot></slot>

<template id="tmpl">
    <div>
        <h2>这是一个组件</h2>
        <!-- <slot></slot> -->
        <!-- 插槽可以设置默认值 -->
        <slot>
            <button>按键</button>
        </slot>
    </div>
</template>

在js中注册该组件模板

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        components:{
            com:{
                template:'#tmpl'
                }
            }
        })
</script>

然后在html中调用该组件，组件中的内容将会被插入到组件模板中的插槽的位置。
如果没有内容将显示组件模板中的默认值。

<div id="app">
   <com>
        <button>按钮</button>
   </com>
   <com>
       <p>这是一个段落</p>
   </com>
   <com>
       <ul>
           <li>111</li>
       </ul>
   </com>
   <com></com>
</div>

效果如下：

插槽可以使组件具有更高的扩展性。

具名插槽

默认的情况下的插槽会将组件包含的内容全部放置到插槽中，如果想区分放置位置，可以使用具名插槽。

在声明插槽时，使用name制定插槽的名字，在html该组件时，组件中包含的内容使用slot指定插槽。

组件模板的声明

<template id="tmpl">
    <div>
        <slot name="left"><span>left</span></slot>
        <slot name="center"><span>center</span></slot>
        <slot name="right"></slot>
    </div>
</template>

组件的使用

<div id="app">
    <com>
        <span slot="left">左边</span>
        <span slot="center">中间</span>
        <span slot="right">右边</span>
    </com>
    <com>
        <span slot="left">左边</span>
        <span slot="center">中间</span>
    </com>
    <com>
        <span slot="center">666</span>
        <span slot="right">右边</span>
    </com>
</div>

效果如下：

作用域插槽

作用域插槽可以实现子组件（aka模板里的插槽）决定内容，父组件决定展示形式

<template id="tmpl">
    <div>
        <!--这里的data是在Vue对象里注册这个组件的时候定义的-->
        <slot :data="pLanguage">
        </slot>
    </div>
</template>

组件调用

<div id="app">
    <com>
        <template slot-scope="slot">
            <h4 v-for="item in slot.data">{{item}}</h4>
        </template>
     </com>
</div>

或者可以写成

<div id="app">
    <com>
        <!--这里的defult是插槽名，defult是默认插槽-->
        <template v-slot:defult="slotProps">
            <h4 v-for="item in slotProps.data">{{item}}</h4>
        </template>
     </com>
</div>

当组件中只有一个插槽时，也可以简写成

<div id="app">
    <com v-slot:defult="slotProps">
            <h4 v-for="item in slot.data">{{item}}</h4>
     </com>
</div>

显示结果如下：