11-取得成分含有量

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>获取组件内容</ タイトル> 
    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue .js」
ヘッド> 
< 身体> 
    < div要素のid = "アプリ" > 
      < カウンターREF = '1' @change = '追加' > </ カウンタ> 
      < カウンターのref = '2つの' @change = '追加' > </ カウンタ> 
      < H1 >总数{{合計}} </ H1 > 
    </ DIV > 
    < スクリプト> 
        Vue.component（' カウンタ' 、{ 
            データ：関数（）{
                 戻り{ 
                    数：0 
                } 
            }、
            テンプレート：' <DIV = @をクリックして"counterClick"> {{番号}} </ div> ' 、
            メソッド：{ 
                counterClick：機能（）{ 
                    
                    この.NUMBER ++ ; 
                    コンソール.logの（「現在の値：」+ この.NUMBER）;
                     // 値によって、その親コンポーネントにサブコンポーネント
                    この$ EMIT（。「変更」、この.NUMBER）
                } 
            } 
        }）
        VaRのアプリ=  新しいヴュー（{ 
            EL：' #app ' 、
            データ：{ 
                合計：0 
            }、
            メソッド：{ 
                追加：関数（）{
                         この.total =  この$のrefs.one.number。+ これを。 $のrefs.two.number;                        
                } 
            }、
        }）
    
    </ スクリプト> 
</ ボディ>
</ HTML >