VUE中关于slot的用法示例

<meta charset="utf-8">

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

<div id="app">  
    <children>  
        <span>12345</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    });  
</script>  

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

• 单个slot

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

<div id="app">  
    <children>  
        <span>12345</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button><slot></slot>为了明确作用范围，所以使用button标签</button>"  
            }  
        }  
    });  
</script>  

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

<children>
    <span>12345</span>
    <span>12345</span>
</children>

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

• 具名slot

两点：

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

<div id="app">  
    <children>  
        <span slot="first">12345</span>  
        <span slot="second">56789</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<button><slot name='first'></slot>为了明确作用范围，<slot name='second'></slot>所以使用button标签</button>"  
            }  
        }  
    });  
</script> 

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

情形：

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

<slot name="second">这是默认内容</slot>

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

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

链接：https://www.jianshu.com/p/f79d9886f4ec
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。