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也可以设置默认值