Vue.js组件之slot内容分发(二)

当没有分发内容时的提示：

假如父组件没有在子组件中放置有标签，或者是父组件在子组件中放置标签，但有slot属性，而子组件中没有该slot属性的标签。

那么，子组件的slot标签，将不会起到任何作用。

除非，该slot标签内有内容，那么在无分发内容的时候，会显示该slot标签内的内容。

如示例代码：

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

说明：
【1】name=’first’的slot标签被父组件对应的标签所替换（slot标签内部的内容被舍弃）；
【2】name=’last’的slot标签，因为没有对应的内容，则显示该slot标签内部的内容。

假如想控制子组件根标签的属性
【1】首先，由于模板标签是属于父组件的，因此，将子组件的指令绑定在模板标签里，是不可以的（因为他归属于父组件）；

【2】假如需要通过父组件控制子组件是否显示（例如v-if或者v-show），那么这个指令显然是属于父组件的（例如放在父组件的data下面）。可以将标签写在子组件的模板上。
如代码：

<div id="app">  
    <button @click="toshow">点击让子组件显示</button>  
    <children v-if="abc">  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            abc: false  
        },  
        methods: {  
            toshow: function () {  
                this.abc = !this.abc;  
            }  
        },  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<div>这里是子组件</div>"  
            }  
        }  
    });  
</script>  

说明：
通过父组件（点击按钮，切换v-if指令的值）控制子组件是否显示。

【3】假如需要通过子组件，控制子组件是否显示（比如让他隐藏），那么这个指令显然是属于子组件的（会将值放在子组件的data属性下），那么就不能像上面这么写，而是必须放置在子组件的根标签中。

<div id="app">  
    <button @click="toshow">点击让子组件显示</button>  
    <children>  
        <span slot="first">【12345】</span>  
        <!--上面这行不会显示-->  
    </children>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        methods: {  
            toshow: function () {  
                this.$children[0].tohidden = true;  
            }  
        },  
        components: {  
            children: {    //这个无返回值，不会继续派发  
                template: "<div v-if='tohidden' @click='tohide'>这里是子组件</div>",  
                data: function () {  
                    return {  
                        tohidden: true  
                    }  
                },  
                methods: {  
                    tohide: function () {  
                        this.tohidden = !this.tohidden;  
                    }  
                }  
            }  
        }  
    });  
</script>  

说明：
点击子组件会让子组件消失；
点击父组件的按钮，通过更改子组件的tohidden属性，让子组件重新显示。
子组件的指令绑定在子组件的模板之中（如此才能调用）；