15 VUEスコープスロット

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル> VUE的作用域插槽</ タイトル> 
    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/ DIST / VUE。
</ ヘッド> 
< ボディ> 
    < DIV ID = "アプリケーション" > 
        < 子> 
            < テンプレートスロットスコープ= '支柱' > 
                < H1 > {{props.item}} </ H1 > 
            </ テンプレート> 
        </ 子供> 
    </ DIV > 
    < スクリプト> 
        Vue.component（' 子' 、{ 
            データ：関数（）{
                 戻り {
                    リスト：[ 1 、2 、3 、4 、5 ] 
                } 
            }、
            テンプレート：
                ` < DIV > 
                    < UL > 
                        < スロットv - のため= " リストの（項目、インデックス）" ：商品=  " 項目" > {{アイテム}} < / スロット> 
                    < / UL> 
                < / div> 
                ' 
        }）。
        VARアプリ=  新しいVUE（{ 
            EL：' #app ' 、
            テンプレート：' 、
            データ：{}、
            メソッド：{ 
                
            } 
        }）
    </ スクリプト> 
</ ボディ> 
</ HTML >