VUE中关于slot的用法示例

转载出处 :http://blog.csdn.net/sinat_17775997/article/details/52484072
slot定义：如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
前提：

  
      
        12345  
          
      
  
  

slot的用法分以下几种情形：

• 单个slot

简单来说，只使用这个标签的话，可以将父组件放在子组件的内容，放到想让他显示的地方。

  
      
        12345  
          
      
  
  

这里需要注意，即使有多个标签，会一起被插入:

    12345
    12345

这里的两个span都将被插入到button内容中

• 具名slot

两点：

1. 父组件在要分发的标签里添加 slot=”name名” 属性
2. 子组件在对应分发的位置的slot标签里，添加name=”name名” 属性

  
      
        12345  
        56789  
          
      
  
 

• 当没有分发内容时的默认提示

情形：

1. 父组件没有在子组件中放置有标签
2. 父组件在子组件中放置标签，但有slot属性，而子组件中没有该slot属性的标签。
   这时候，我们可以给子组件中的slot默认内容，如：

这是默认内容

关于隐藏子组件，可以在父组件中设置如v-if,v-show，也可以在子组件中去设置，对应的属性应放在对应的父子data中

后期有注意事项及时更新...