VUE 4つの動的コンポーネント（構成要素）、およびキープアライブ

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>动态组件</ タイトル> 
    < スクリプトSRC = "JS / vue.js" > </ スクリプト> 
< / ヘッド> 
< 身体> 
    < div要素のid = "itany" > 
        < ボタン@click = "フラグ= '私の-こんにちは'" >
        ボタン@click =「のフラグ= 『私の世界』」>ショーの世界アセンブリ</ ボタン> 


        < divの> 
            <！ - キープ・アライブ・アセンブリキャッシュ不活性成分を使用して、再レンダリングを避けるために、それぞれの時間を保持することができ、デフォルト不活性成分と再作成の破壊- > 
            < キープアライブ> 
                < コンポーネント：IS = "旗" > </ 部品>     
            </ キープアライブ> 
        </ DIV > 
    </ DIV > 

    < スクリプト> 
        VAR VM = 新しい新しいヴュー（{ 
            EL：'#it​​any "
            データ：{ 
                内のフラグ：' マイ・ハロー' 
            }、
            コンポーネント：{ 
                ' マイハロー' ：{ 
                    テンプレート：' <H3> Iハロー成分：{{X}} </ H3> ' 、
                    データ（）{ 
                        リターン{ 
                            X：Math.random（）
                        } 
                    } 
                }、
                ' 私の世界' ：{ 
                    テンプレート：' <H3> I世界成分：{{Y}} </ H3> ' 、
                    データ（）{ 
                        リターン{ 
                            Y：Math.random（）
                        } 
                    } 
                } 
            } 
        }）。    
    </ スクリプト> 
</ ボディ> 
</ HTML >