vuejs 中如何使用slot

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

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

Hello world

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

  
    
hello world
  
  

  

显示：

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

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

再次运行结果如下：

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

具名slot

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

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

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

  
    
我的商品列表
    

      
啤酒
      
八宝粥
    
    

      
苹果
      
西红柿
    
  
  

  
    
没有放置任何HTML片段
    
  

运行结果:

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