vue-スロットと命名スロット

 

 

<！DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        
        < メタのcharset = "UTF-8" > 
        < タイトル> vue1 </ タイトル> 
        < スクリプトSRC = "https://cdn.bootcss.com/vue/2.6.11/vue。 JS」> </ スクリプト> 
      
        < リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref = "vue.css" > 
    
    </ ヘッド> 
    < 身体> 
        
        
        <

            CoMP ：MSG = "MSG" > 
                < H1の> Tongyong </ H1の> 
                < H1のスロット= S1 > S1slot </ H1の> 
            </ CoMPの> 
        </ DIV >     
        
        
        < スクリプト> 
            VAR のCoMP = { 


                // 挿入HTMLアセンブリ意志スロットのスロットに
                // 対応するスロットS1 = S1内容置くという名前のスロット
                テンプレート： ` < divの> 
                    < H1の> 最初の行< / H1の> 
                    <スロット名=" S1 " > < / スロット> 
                    < H1 > 二行目< / H1> 
                    < スロット> < / スロット> 
                    < H1 > 第三の線< / H1> 
                    {{MSG}} < / div> ` 

            } 
            VARのアプリ= 新しいヴュー（{ 
                EL：" #app " 、
                コンポーネント：{ 
                    COMP 
                } 
 
                
            }）         
        </ スクリプト> 
    </ ボディ> 
</ HTML >