如何讓vue自定義組件可以包裹內容，並且渲染出來，以及組件的組合使用

當我們用vue一開始寫項目時，按需求文檔自定義了一個公用組件，這個組件很多地方都用到了，然后隨着項目的推進，又有了新的需求要在里面加東西，但又不是所有的地方都要加

這時候我們想這樣往里面塞內容↓    <my-template>是我們自定義的公共組件

<my-template>
    <h2>想加入一個子標題</h2>
</my-template>

但這樣運行代碼后，發現頁面還是以前的樣子，這個div並沒有出現，這個時候該怎么辦呢

這里我們就要用到一個vue的功能：插槽slot

slot是定義在子組件里的，用來接收父組件使用時包裹的內容

<div id="app">
    <son-demo>
        <h2>新增一個子標題</h2>
    </son-demo>
</div>

<script type="text/x-template" id="sonModel">
    <h1>開始有的標題</h1>
    <slot></slot>  //這里就是用來接收父組件傳過來的內容，我們也可以設置默認值，當父不傳時顯示
</script>

<script>
    //定義子組件
    var sonDemo = {
        template: "#sonModel",
    }
    //父組件
    new Vue({
        el: '#app',
        components: { sonDemo },
    });
</script>

這時候我們已經完成需求了，很開心，但第二天事比產品經理又來搞事情了，那就是不僅要加一個標題還要加一段內容，但這個內容並不和標題在一起中間隔了很多代碼，這時候該怎么辦呢

這里就要用到slot的內容分發了

<div id="app">
    <son-demo>
        <h2 slot="title">新增一個子標題</h2>
        <div slot="body">新加內容</div>
    </son-demo>
</div>

<script type="text/x-template" id="sonModel">
    <h1>開始有的標題</h1>
    <slot name="title"></slot>
    <slot name="body"></slot>
</script>

<script>
    //定義子組件
    var sonDemo = {
        template: "#sonModel",
    }
    //父組件
    new Vue({
        el: '#app',
        components: { sonDemo },
    });
</script>

其實我們不僅可以分發原生的html代碼內容，也可以用其他子組件，在使用子組件時也加上slot=“body”，這樣在body里面也會渲染出對應的子組件，這也就是組件的相互組合使用

 再來看一個父組件使用scope定義子組件模板結構的例子，這里有點難理解，還是需要自己動手去寫一遍才能理解深刻

 

看了一下官網：在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。

也就是把父組件使用slot時的關鍵字變成了v-slot，同時也加了新功能

動態參數也可以用在 v-slot 上，來定義動態的插槽名：

<base-layout> <template v-slot:[dynamicSlotName]> ... </template> </base-layout>