$、参考文献でVUE、$発し、使用シナリオに$

1. $は使用シナリオを発します

親コンポーネントサブアセンブリとデータを通信するメソッドを呼び出します

注：時間サブ要素タグは大文字と小文字が区別使用はありません「 - 」分離

サブコンポーネント：

<テンプレート> 
  <ボタンをクリックします= @ " emitEvent " > I </ボタン>クリック
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        MSG：" Iデータサブアセンブリ" 
      } 
    、} 
    方法： { 
      emitEvent（）{ 
        この。$ EMIT（「私のイベント」、この.MSG）
         // メソッドをトリガボタンイベント、および$ EMITでカスタム私のイベントをトリガする方法をクリックして、
this.msgデータを転送します。
      } 
    } 
  }
 </ SCRIPT>

親コンポーネント：

<テンプレート> 
  <DIV ID = " アプリケーション" > 
    <MY- @子供-A イベント = " getMyEventは" > </託児-A> 
    <！ -親コンポーネントの私のイベントのイベントを監視する方法で行われ、その後、取るために渡されたサブアセンブリの値- > 
  </ div> 
</テンプレート> 
<SCRIPT> 
  インポートChildA から ' ./components/child.vue ' 
  エクスポートデフォルト{ 
    コンポーネント：{ 
      ChildA 
    }、
    メソッド：{ 
      getMyEvent（MSG）{ 
          console.logは（' --------->受信したデータを'MSG +）// データ受信---------> Iデータサブアセンブリ
      } 
    } 
  }
 </ SCRIPT>

2、$ refのシーンを使用して

この方法は、親コンポーネントサブアセンブリを呼び出し、データを転送することができます

注：時間サブ要素タグは大文字と小文字が区別使用はありません「 - 」分離

親コンポーネント：

<テンプレート> 
  の<divのid = " アプリ" > 
    <子- REF = " 子" > </子- > 
    <！ -用参照给子组件起个名字- > 
    <ボタン@クリック= " getMyEvent " >点击父组件</ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  インポートChildA から ' ./components/child.vue ' 
  エクスポートデフォルト{ 
    コンポーネント：{ 
      ChildA 
    }、
    データ（）{ 
      リターン{ 
        MSG："私は、親データ要素です」
      }
    }、
    方法：{ 
      getMyEvent（）{ 
          この $ refs.child.emitEvent（。これは.msg）;
           // メソッド呼び出しのサブコンポーネント、子供は名前からトップREFで、emitEventは、サブアセンブリの方法です。
      } 
    } 
  }
 </ SCRIPT>

サブコンポーネント：

<テンプレート> 
  <ボタン>をクリックI </ボタン> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    メソッド：{ 
      emitEvent（MSG）{ 
        はconsole.log（' 受信データ---------> ' + MSG）// 受信データ---------> Iコンポーネントは、親データである
      } 
    } 
  }
 </ SCRIPT>

使用シナリオ3. $

コンポーネントの兄弟間のデータの相互転送

まず、VUE（兄弟間のブリッジ）の空白のインスタンスを作成します

インポートビューから 「のための」
      輸出デフォルト 新しいビュー（）

サブアセンブリchilda

<テンプレート> 
    の<div> 
        <スパン> A组件- > {{MSG}} </スパン> 
        の<input type = " ボタン"値= " 把组件数据传给B " @click = " 送信" > 
    </ DIV > 
</テンプレート> 
<スクリプト> 
インポートvmson から " ../../../util/emptyVue " 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            MSG：{ 
                ：' 111 ' 、
                B：'222 ' 
            } 
        } 
    }、
    方法：{ 
        ：送信機能を（）{ 
            。vmson $は（発する" aevent "、この.MSG）
        } 
    } 
}
 </スクリプト>

サブアセンブリchildb

カスタムイベントのコールバックを聴い上の$によって、受信者は、データを受信し、

<テンプレート> 
 の<div> 
    データ<スパン> B成分は、パスは、 - > {{MSG}} </スパン> 
 </ div> 
</テンプレート> 
<SCRIPT> 
      インポートvmson から " ../../ ../util/emptyVue " 
      エクスポートデフォルト{ 
         データ（）{ 
                リターン{ 
                    MSG：" " 
                } 
            }、
         マウントされた（）{ 
                。vmson $ ON（" aevent 」、（ヴァル）=> { // イベントをリッスンaevent、コールバック関数矢印の機能を使用するには、 
                    にconsole.log（ヴァル）; //は、結果を印刷：私はのデータコンポーネントだ
                    この。MSG =MSG = ヴァル;
                }）
          } 
    }
 </ SCRIPT>

親コンポーネント

<テンプレート> 
     の<div> 
      <childa> </ childa>     
      <br /> 
      <childb> </ childb>       
     </ div> 
</テンプレート> 
<スクリプト> 
   輸入childa から ' ./childa.vue ' ; 
   輸入childb から ' ./childb.vue ' ; 
   エクスポートデフォルト{ 
       コンポーネント：{ 
           childa、
           childb 
       }、
       データ（）{ 
           リターン{ 
               MSG："" 
           } 
       }、
           
   }
 </ SCRIPT>

$、参考文献でVUE、$発し、使用シナリオに$

おすすめ