VUEカスタマイズする方法コンポーネントは、ネイティブのイベントをバインドされています

 

　　 主に以下の4つの例ではデモデモ、（サンプルコードJSは、VueのCDNを引用）、小さなパートナーが直接ビューを実行するためのサンプルコードをコピーすることをお勧めします

　　例demo4を見て、直接プルダウン小さなパートナーを急い

　　注：サブアセンブリのコンポーネントと呼ばれるグローバルまたはローカルレジスタ、コンポーネント名が宣言特徴は、（子供がデモを次の）カスタムコンポーネントであります

 

　　Demo1-親コンポーネントは、ネイティブのイベントに直接結合されます

 <！DOCTYPE HTML > 
< HTML > 
     < ヘッド> 
           < メタ文字コード= "UTF-8" > 
           < タイトル> </ タイトル> 
           < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ スクリプト> 
     </ ヘッド> 
     < 身体> 
           < div要素のid ="ルート」@click = "handleClick" > 
                子
           </ DIV > 
           <' 子' 、{ 
                     テンプレート：' の<div>子</ div> ' 
                }）
                
                VaRのVM =  新しいヴュー（{ 
                     EL：' #root ' 、
                     メソッド：{ 
                           handleClick：関数（）{ 
                                アラート（1 ）; 
                           } 
                     } 
                } ）
           </ スクリプト> 
     </ ボディ> 
</ HTML >

 

 

　　Demo2-の場合は、DEMO1カスタムコンポーネントとして直接ネイティブのイベントのバインディングの子に需要が子コンポーネント結合事象に対してネイティブである場合は、それを行う方法である必要があり、文句を言うのだろうか？（demo4を見た後、demo3を見てください）

<！DOCTYPE HTML > 
< HTML > 
     < ヘッド> 
           < メタ文字コード= "UTF-8" > 
           < タイトル> </ タイトル> 
           < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ スクリプト> 
     </ ヘッド> 
     < 身体> 
           < div要素のid ="ルート」> 
                < 子@click = "handleClick" > </ 子> 
           <
           
                Vue.component（' 子' 、{ 
                     テンプレート：' の<div>子供</ DIV> ' 
                }）
                
                のvar VM =  新しいヴュー（{ 
                     エル：' #root ' 、
                     メソッド：{ 
                           handleClick：機能（）{ 
                                警告（1 ） ; 
                           } 
                     } 
                }）
           </ スクリプト> 
     </ ボディ> 
</HTML >

 

 　　

　　Demo3- 使用$ EMIT（）リリースイベントブロードキャスト、次に親コンポーネントサブアセンブリは、トリガー外部イベントをリッスン、およびに適切な方法を実行することができます

<！DOCTYPE HTML > 
< HTML > 
     < ヘッド> 
           < メタ文字コード= "UTF-8" > 
           < タイトル> </ タイトル> 
           < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ スクリプト> 
     </ ヘッド> 
     < 身体> 
           < div要素のid ="ルート」> 
                < 子@click = "handleClick" > </ 子> 
           <
           
                Vue.component（' 子' 、{ 
                     テンプレート：' チャイルド</ div> <divの@ = "handleChild"をクリック> ' 、
                     {：メソッド
                           handleChild：関数（）{
                                 この。$発する（' クリック' ）; 
                           } 
                     } 
                } ）
                
                VaRのVM =  新しいヴュー（{ 
                     EL：' #root ' 、
                     メソッド：{
                           クリックし行動します：関数（）{ 
                                アラート（1 ）。
                           } 
                     } 
                }）
           </ スクリプト> 
     </ ボディ> 
</ HTML >

　　注意：ただし、このアプローチは、あまりにも多くの問題を2つのイベントがトリガするために、あなたはdemo4の方法を使用する必要があります

　　

　　Demo4- 直接ネイティブのイベント修飾子を使用してすることができます

<！DOCTYPE HTML > 
< HTML > 
     < ヘッド> 
           < メタ文字コード= "UTF-8" > 
           < タイトル> </ タイトル> 
           < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ スクリプト> 
     </ ヘッド> 
     < 身体> 
           < div要素のid ="ルート」> 
                < 子click.native @ = "handleClick" > </ 子> 
           <
           > 
                Vue.component（' 子' 、{ 
                     テンプレート：' の<div>子</ div> ' 
                }）
                
                VaRのVM =  新しいヴュー（{ 
                     EL：' #root ' 、
                     メソッド：{ 
                           handleClick：関数（）{ 
                                アラート（1 ）; 
                           } 
                     } 
                }）
           </ スクリプト> 
     </ ボディ>
</ HTML >