<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > < > < 本文> < DIV ID =「アプリケーション」> <！ - プロパティ（V-結合:)フォームを結合することによって、データは、サブアセンブリに渡されるときにサブアセンブリ、親コンポーネントを挙げることができます内側のサブアセンブリ、使用するサブアセンブリに送信財産結合形、- > < COM1 Vバインドに：parentmsg = "MSG" > </ COM1 > </ divの> < スクリプト> // ヴュ与えるインスタンスを作成しますViewModelに VAR VM = 新しい新しいヴュー（{ EL：' #app ' 、 データ：{ MSG：' 123 AH -データ親コンポーネント' }、 方法：{}、 コンポーネント：{ // 結論：プレゼンテーション後、サブアセンブリを見つけ、デフォルトの方法は、親の成分データのデータとメソッドにアクセスすることは不可能である COM1：{ データ（）{ // 注意：サブ以下のようなデータ・コンポーネント内のデータ、親コンポーネントによって送信されてくるが、民間のサブアセンブリ自体はありません、：アヤックスにより、サブアセンブリ、バックデータを要求し、それがデータ本体の内部に配置することができ; // データのデータされています;読み書き可能である リターン{ ：タイトル' 123 ' 、 ：コンテンツ' QQQ ' } }、 テンプレート：「<クリックして@ = "変更"のH1>これはサブアセンブリ--- {{parentmsg}} </である H1 > " 、 // 注意：小道具のすべてのデータ・コンポーネントは、親コンポーネントによってサブアセンブリに伝達される //データの小道具は、読み取り専用で、再割り当てすることができない 小道具：[ 「parentmsg 」] // 性質上、親コンポーネントparentmsgパスの定義、小道具配列の最初のものなので、このデータを使用するために 指令を： {}、 フィルタ：{}、 コンポーネント：{}、 メソッド：{ 変更（）{ この.parentmsg = ' 修飾された' } } } } ）}; </ スクリプト> </ ボディ> </ HTML >
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > < > < ボディ> < divの上記のid =「アプリケーション」> <！ - 子コンポーネントの配信方法に親コンポーネント、使用してイベント結合機構と、V-に、私たちはイベントの属性をカスタマイズし、その後、サブアセンブリ、いくつかの方法で、このメソッドを呼び出す通過することができます- > < COM2 @func = "ショー" > </ COM2 > </ divの> < テンプレート上記のID = "TMPL" > < divの> < H1 >これは、サブアセンブリである</ のH1 > < INPUTのタイプ=「ボタン」値"=これは、サブコンポーネントのボタンである-親コンポーネントメソッドFUNCから転送をトリガするためにそれをクリックして「 @click =」MyClick "> </ ディビジョン> </ テンプレート> < スクリプト> //はコンポーネントタイプリテラルテンプレートオブジェクト定義 VAR COM2 = { テンプレート：「#tmplを」、// IDを指定することにより、負荷が起こったことを示しIDテンプレート要素の内容は、HTMLなどの構造要素で指定された データ（）{ リターン{ ：{名前：sonmsg ' 頭の息子' ：、年齢。6 } } 、} 方法：{ MyClick（）{ // クリックボタンのサブコンポーネントたときに、どのように上を通過する親コンポーネントのFUNC方法を取得し、このメソッドを呼び出すこと？？？ // 英語の本来の意図を発する：、呼び出しをトリガー打ち上げを意味する // この$のEMIT（ 'func123'、123、456）。 この$発する（。' FUNC ' 、この.sonmsg） } } } // Vueのインスタンスを作成し、取得しますビューモデルの VAR VM = 新しい新しいヴュー（{ EL：' #app ' 、 データ：{ datamsgFormSon：ヌル }、 メソッド：{ ショー（データ）{ // はconsole.log（「メソッドは、親本体アセンブリと呼ばれる示します：--- 「+データ） // はconsole.log（Data）を、 この.datamsgFormSon= データ } }、 コンポーネント：{ COM2 // COM2：COM2 } }）。 </ スクリプト> </ ボディ> </ HTML >