vuejs 中如何使用slot

官网地址：https://cn.vuejs.org/v2/guide/render-function.html

slot的使用场景:如果要在定义好的组件内部，加上一段html或者文本，例如这样

<my-button>

<p>Hello world</p>

</my-button>

,这种时候，你就可以使用slot将，插入的html代码，在模板中slot位置显示,my-button组件定义如下:

<div id="box">  <mybutton>    <p>hello world</p>  </mybutton>  <hr>  <mybutton></mybutton></div><template id="mybutton">  <div>    <button @click="show">      <slot></slot>    </button>  </div></template></body><script>  new Vue({    el:'#box',    components:{      'mybutton':{        template:'#mybutton',        methods:{          show:()=>{            alert(1);          }        }      }    }  });</script>

显示：

如果使用了slot，没有往自定义的组件中，加入HTML代码，slot的位置就没有显示，当然这种情况，可以设置

slot 的默认值,将上面模板的slot改为

<template id="mybutton">  <div>    <button @click="show">      <slot>我是默认值</slot>    </button>  </div></template>

再次运行结果如下：

结论： slot 可以理解为一个插槽，可以将组件使用中插入的HTML ，在slot的位置显示

具名slot

    如果模板中使用到多个slot，就需要具名slot。

slot标签有个属性name ,配置分发内容，多个slot可以有多个不同的名字，具名slot将匹配对应片段具有slot特性的元素.

    使用多个slot标签，也可使用一个匿名的slot，作为无法匹配的HTML片段的插槽，如果没有匿名的slot，无法匹配到的HTML片段将舍弃

<div id="box">  <my-list>    <p>我的商品列表</p>    <ul slot="head">      <li>啤酒</li>      <li>八宝粥</li>    </ul>    <ol slot="footer">      <li>苹果</li>      <li>西红柿</li>    </ol>  </my-list>  <br>  <span>    <p>没有放置任何HTML片段</p>    <my-list></my-list>  </span></div><template id="list">  <div>   <p>hello world!</p>    <slot></slot>    <slot name="head">如果，没有片段匹配到，显示的字段_head</slot>    <slot name="footer">如果，没有片段匹配到，显示的字段_foot</slot>  </div></template></body><script>  new Vue({    el:'#box',    components:{      'my-list':{        template:'#list',      }    }  });</script>

运行结果:

这样，具有slot特性的HTML片段内容会在对应具名的slot 标签处显示，当然，具名的slot也可以设置默认值