vue中的插槽

　　在vue中，有的名词听着高大上，挺怪异的，比如插槽，就是slot，它的作用是为了解决组件之间写的内容在组件中的使用问题。

　　一、插槽的作用

  
  


    

          111          
          222          
                    
    
  
    
    

　　显示结果：

　　可以看出，在组件的模板定义中使用就可以使用该组件在父项中定义的内容，如果没有定义，那么就使用slot默认的定义。

　　二、插槽的具名使用

　　为了更灵活、更丰富地使用该组件使用时的定义信息，vue定义了具名插槽。

  
  


    

          
                
头部1
                    11111
                
底部1
                    
          
                
头部2
                     22222
          
          
                      33333 
                
底部3
                    
          44444          
                    
    
    
    

　　显示结果：

　　注意：
　　　　1、如果”这是信息内容：{{info}}“放在最顶端，那么该内容就出现在顶端，否则是出现在底端；
　　　　2、具名插槽就是slot的使用根据名称对应；
　　　　3、如果定义了slot，那么只要组件使用时定义了内容那么该内容就会出现在组件中；
　　　　4、如果组件使用时没有定义了内容，那么具名插槽就不起作用。
　　三、插槽的传值

  
  


    

          
                {{myprops.mynews.title}}
                

                {{myprops.mynews.content}}
                    
          
---分割线---
          
                    
    
    
    

　　显示结果：

　　注意：
　　　　1、如果在插槽中定义了绑定，那么使用组件中必须定义内容，否则报错；
　　　　2、在插槽中定义绑定是为了父项使用该组件时在内容中引用该组件的参数；
　　　　3、如果在父项使用该组件时没有定义内容那么模板中放置的内容才起作用；
　　　　4、这个定义与使用有点绕，看下面的图示就比较清楚了。

　　在模板中使用mynews与组件内定义的news关联也就是绑定，在使用该组件时缺省定义了myprops，这相当于入口地址或者参数传入的顶部对象，也可以理解为一个容器，传进来的对象放置在这个容器当中，接下来就可以通过对象引用的方式使用组件内部定义的参数了。