Vueのカスタムイベント：カスタムイベントをトリガ

 

プロジェクト構造

 

 

2つのサブアセンブリ（Mongo.vue）

 

< テンプレート> 
    < ボタン@click = "食べる" >按钮</ ボタン> 
</ テンプレート>

< スクリプト> 
輸出デフォルト{
  作成した（） {
    この上。$（" 食べる" 、機能（フルーツ）{
      console.log（「サブコンポーネントが自身の起動イベントを受信します」）。
    }）;
  }、
  方法：{
    {食べます（）
      console.log（" サブコンポーネントの発売記念イベント" ）;
       この。$ EMIT（" EAT " 、" マンゴーを" ）;
    }
  }
}。
</ スクリプト> 
< スタイル> 
</ スタイル>

 

三の親コンポーネント（App.vue）

 

< テンプレート> 
  < div要素のid = "アプリ" > 
    < H3 > {{名前}} </ h3は> 
    <！ - 子组件- > 
    < モンゴ@eat = '食べる' /> 
  </ DIV > 
</ テンプレート>

< スクリプト> 
輸入モンゴから「./components/Mongo 」。

輸出のデフォルト{
  名前：「アプリ」、
  データ（）{
    リターン{
      名前：「」
    }。
  }、
  方法：{
    果物を食べる） {
      console.log（「イベントを受信する親要素」）;
       この.nameの= フルーツ。
    }
  }、
  成分：{}モンゴ
}。
</ スクリプト>

< スタイル> 
</ スタイル>

 

4つの動作結果