Vue组件中slot的用法

Vue组件中slot的用法

主要是让组件的可扩展性更强。

1. 使用匿名slot

//定义组件my-component

  

//使用方法

  
我就是slot的替代内容，这里可以放任何标签元素

2. 给slot加个名字

//定义组件my-component

  

//使用方法

  

    我就是这个叫mySlot的slot替代内容，这里可以放任意标签，即使是一长串ul》li列表，但是我是一个有名字的宝宝，所以你必须给我加上slot=“mySlot”不然我就报错给你看！
  

如果不在有slot的组件里加入任何标签，slot什么都不会显示的。

应用场景：

案例： 饿了么页面头部，根据slot中name不同，显示不同的标签

头部组件代码：

template>
    

        
        
        

            
        
        
            
            登录|注册
        
        

            {{headTitle}}
        
        
        
        
        
    

定位页面调用：

            ele.me