16-VUEは、名前付きのスロットを使用しました

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換" コンテンツ= "IE =縁" > 
    < タイトル> 21-VUE中使用插槽</ タイトル> 
    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue / DIST / VUE。
</ ヘッド> 
< ボディ> 
    < DIV ID = "アプリケーション" > 
        < ボディコンテンツ> 
            < DIV クラス= "ヘッダ" スロット= 'ヘッダ' >ヘッダ</ DIV > 
            < DIV クラス= "フッタ" スロット= 'フッタ' >フッター</ DIV > 
        </ ボディ・コンテンツ> 
    </ divの> 
    < スクリプト> 
        Vue.component（"ボディコンテンツ' 、{
            テンプレート：
            ` 
                < DIV > 
                    < スロット名= ' ヘッダ' > < / スロット> 
                    < DIVクラス= " コンテンツ" > コンテンツ内容< / div> 
                    < スロット名= ' フッタ' > < / スロット> 
                < / div> 
            ` 
        } ）
        VaRのアプリ=  新しいヴュー（{ 
            エル：' #app ' 、

        }）
    
    </ スクリプト> 
</ ボディ> 
</ HTML >