使用VUEパス値のブラザーバスアセンブリ

1.新しいbus.jsを作成します。

「の」からインポートビュー
のエクスポート既定  の新しいビュー

2. VUE値文書は、各組み込まbus.jsの値を渡し、受け取ります

「../util/bus'からインポートバス

3.バスを使用して値によって定義された方法。$エミット（「methodNameの」、データ）、methodNameのメソッドのカスタム名

< ボタン@click = "トランス（）" >传值</ ボタン>

方法：{ 
    （）トランス{ 
      。バス$（発する 'テスト'、この.helloData）
    } 
  }、

値を受け取るためのアセンブリ4.、使用bus.on（「methodNameの」、ヴァル=> {}）、valがオーバー値パスであります

搭載（）{ 
    バス（上の$。 'テスト'、ヴァル=> { 
      にconsole.log（ヴァル）; 
      この .cdata = ヴァル
    }）
  }

完全な例：

App.vue

< テンプレート> 
  < div要素のid = "アプリ" > 
     < HelloWorldの/> 
     < 子> </ 子> 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
からの輸入HelloWorldの' ./components/HelloWorld ' 
から輸入子供" ./components /チャイルド' 
輸出のデフォルト{ 
  名：' アプリケーション」、
  コンポーネント：{ 
    HelloWorldの、子供
  } 
} 
</ スクリプト>

bus.js

「の」からインポートビュー
のエクスポート既定  の新しいビュー

サブアセンブリHelloWorld.vue

< テンプレート> 
< divの> 
< ボタン@click = "トランス（）" >传值</ ボタン> 
</ DIV > 
</ テンプレート> 
< スクリプト> 
からの輸入バス' ../util/bus ' 
輸出のデフォルト{ 
  名：" HelloWorldの" 、
  データ（）{ 
    リターン{ 
      helloData：" こんにちは" 
    }。
  }、
  メソッド：{
      バス。$放出（試験' 、この.helloData）
    } 
  } 
} 
</ スクリプト>

サブアセンブリChild.vue

< テンプレート> 
< divの> 
{{CDATA}} 
</ DIV > 
</ テンプレート> 
< スクリプト> 
輸入バスから' ../util/bus ' 
輸出のデフォルト{ 
  名：" 子供" 、
  データ（）{ 
    リターン{ 
      CDATA：" 子の数据" 
    }。
  }、 
  （）{ 搭載
    バス（上の$。' テスト' 、ヴァル=> { 
      にconsole.log（val）で、
      これを.cdata = ヴァル
    }）
  } 
} 
</ スクリプト>

使用VUEパス値のブラザーバスアセンブリ

おすすめ