本文出自：

http://blog.csdn.net/wyk304443164

看了Vue兩天了，記了不少筆記。基本都是稍微看了下，等專案的時候再搞吧。

下面開始

說實話官網比較難懂，在我一開始看的時候，很懵逼，然後看了這篇

http://blog.csdn.net/sinat_17775997/article/details/52484072

講的真的很好。我都能看懂……(^ ^)

下面來點個人總結：

單個Slot

在children這個標籤裡面放Dom，Vue不會理你，也就是不會顯示，類似React：this.props.children。

//父
<children>  
    <span>12345</span>//這邊不會顯示
</children>

//子
components: {
    children: {
        template: "<button>為了明確作用範圍，所以使用button標籤</button>"
    }
}

你需要寫成這樣

children: {
    template: "<button><slot></slot>為了明確作用範圍，所以使用button標籤</button
 
>"  
} 

注意這邊 slot 相當於一個坑，等著父元件給填上，這邊 slot 代表的就是上面的 span

多個Slot

這邊需要加name屬性，說白了，多個Slot就不像上面單個，需要有個對應關係。

父-> slot="name1"
子-> <slot name="name1"

//父
<children>  
    <span slot="name1">12345</span>
</children>

//子
components: {
    children: {
        template: "<button
 
>
                        <slot name="name1"></slot>
                        button標籤
                    </button>"
    }
}

這邊寫了一個name1，如果有多個，就插多個，比較簡單。

作用域

<children>  
    <span slot="first" @click="tobeknow">
     12345
    </span>  
    <span slot="second">56789</span> 
</children>

這邊的@click=”tobeknow”的作用域是 父元件，也就是，不能訪問自元件的方法

父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯

沒有分發時內容的提示

如果父元件與自元件有對應的name。
那麼父元件優先，<slot>xx</slot>,xx不會顯示

如果沒有對應的name
那麼子元件內的<slot>xxx</slot>,xxx 將會被展開，<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標籤內部的內容。

父元件控制子元件內部的方法

this.$children[0].tohidden = true;

<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>