注意：グローバルまたはローカルレジスタと呼ばれるサブアセンブリの構成部品を、（子供がデモを次の）宣言したコンポーネント名がカスタムコンポーネントであります
イベントリスナーを追加する親コンポーネントに直接Demo1-
1 <！DOCTYPE HTML> 2 <HTML> 3 <ヘッド> 4 <メタ文字コード= "UTF-8"> 5 <タイトル> </タイトル> 6 <スクリプトSRC = "../../ vue.js"> </ SCRIPT> 7 </ HEAD> 8 <BODY> 9 <DIV ID = "ルート" @クリック= "handleClick"> 10 子 11 </ div> 12 <スクリプト> 13 Vue.component（ '子' 、{ 14 テンプレート：「< DIV>子</ div>」 15 }） 16 17 VaRの VM = 新しいヴュー（{ 18 EL '#root' 、 19個 の方法：{ 20 handleClick：関数（）{ 21 アラート（1 ）; 22 } 23 } 24 }） 25 </スクリプト> 26 </ BODY> 27 </ HTML>
Demo2-使用$ EMIT（）リリースイベントブロードキャスト、次に親コンポーネントサブアセンブリは、トリガー外部イベントをリッスン、およびに適切な方法を実行することができます
1 <！DOCTYPE HTML> 2 <HTML> 3 <ヘッド> 4 <メタ文字コード= "UTF-8"> 5 <タイトル> </タイトル> 6 <スクリプトSRC = "../../ vue.js"> </ SCRIPT> 7 </ HEAD> 8 <BODY> 9 <DIV ID = "ルート"> 10 <子@クリック= "handleClick"> </子> 11 </ div> 12 <スクリプト> 13 Vue.component（ 「子」、 { 14 テンプレート： '<DIV @クリック= "handleChild">子</ DIV>' 、 15 方法：{ 16 handleChild：関数（）{ 17 本。$発する（ 'クリック' ）。 18 } 19 } 20 }） 21 22 VaRの VM = 新しいヴュー（{ 23 EL '#root' 、 24個 の方法：{ 25 handleClick：関数（）{ 26 アラート（1 ）、 27 } 28 } 29 }） 30 </スクリプト> 31 </ BODY> 32 </ HTML>
注意：ただし、このアプローチではなくネイティブのイベントへの結合よりも、コンポーネントのカスタムイベントをバインドすることであり、2つのイベント、多くの問題を引き起こし、この時間法は、demo3を使用する必要があります
Demo3-イベントモディファイアネイティブが直接使用することができます
1 <！DOCTYPE HTML> 2 <HTML> 3 <ヘッド> 4 <メタ文字コード= "UTF-8"> 5 <タイトル> </タイトル> 6 <スクリプトSRC = "../../ vue.js"> </ SCRIPT> 7 </ HEAD> 8 <BODY> 9 <DIV ID = "ルート"> 10 </子> <click.native = "handleClick" @子> 11 </ div> 12 <スクリプト> 13 ヴュー。コンポーネント（「子」、 { 14 テンプレート： '<DIV>子</ div>' 15 }） 16 17 VaRの VM = 新しいヴュー（{ 18 EL '#root' 、 19個 の方法：{ 20 handleClick：関数（）{ 21 アラート（1 ）; 22 } 23 } 24 }） 25 </スクリプト> 26 </ BODY > 27 </ HTML>
抜粋します。https：//www.cnblogs.com/tu-0718/p/11196009.html