値によってVue--非サンズ・コンポーネント（バス/バス/モデル/オブザーバーモードをサブスクライブ公開します）

<！DOCTYPE HTML > 
< HTML > 

    < ヘッド> 
        < メタのcharset = "UTF-8" > 
        < タイトル>非サンズが通過成分の値（バス/バス/モデル/オブザーバーパターンをサブスクライブパブリッシュ）</ タイトル> 
        < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ スクリプト> 
    </ ヘッド> 

    < 身体> 
        < DIV ID = "ルート" > 
            < 子コンテンツ= "デル" > </ 子> 
            < 子コンテンツ= "リー" > </ 子> 
        </ divの> 
        < スクリプトタイプ= "テキスト/ javascriptの" > 
            Vue.prototype.bus =新しいヴュー（）

            Vue.component（ '子'、{ 
                小道具：{ 
                    内容：文字列
                } 、
                データ（）{ 
                    リターン{ 
                        selfContent：this.content 
                    } 
                }、
                テンプレート： ' < DIV @click = "handleClick" >{{selfContent}} </ DIV> 」、
                メソッド：{ 
                    handleClick（）{ 
                        。this.bus $発する（ '変化'を、this.selfContentを）
                    } 
                }、 
                （）{ 搭載
                    するvar _this =この
                    this.busを$（上の'変更'、（MSG） => { 
                        _this.selfContent = MSG 
                    }）
                } 
            }）
            VaRのVM =新しいヴュー（{ 
                EL '#root' 
            }）
        </ スクリプト> 
    </ ボディ> 

</ HTML >