vue2.0で通信を実装するにはどうすればよいですか?

この記事は主に vue2.0 兄弟コンポーネント (ピア) 通信の実装コードを紹介します。非常に優れており、必要な友人は参考にしてください。最初の 2 つの記事:

親コンポーネントが子コンポーネントに渡される子コンポーネントが親コンポーネントに渡される写真を見て、写真を見て、写真を見てください! ！ ！

個人的な理解:

これは明らかに、人生において弟が兄に電話するようなものです。双方に携帯電話と電波塔が必要です。

Aコンポーネント

Bコンポーネント

• $emitがデータを送信

• $onがリッスンして受信データSignal送信タワー=＆gt; app.vue =＆gt; src/asstes の下に新しいものを作成します。 中間イベント行の合字 .js (接尾辞 .js に注意してください)

  import Vue from 'Vue'
  export default new Vue;

  2.2. src/components に A.vue を作成します

<template>
 <p>
 <h2>A组件</h2>
 <button v-on:click="spot">点一下就传</button>
 </p>
</template>
<script>
 import bus from &#39;../assets/ligature&#39;;
 export default {
 methods: {
 spot: function() {
 //监听A组件中的spot，并发送数据
 bus.$emit("spot", &#39; 没想到吧！！我是A组件&#39;)
 }
 }
 }
</script>

• 2.3. src/components に B.vue を作成します

  <template>
   <p>
   <h2>B组件</h2>
   <p>结果:{{msg}}</p>
   </p>
  </template>
  <script>
   import bus from "../assets/ligature";
   export default {
   data() {
   return {
   msg: "这TMD是默认值除非你点一下上面的按钮"
   };
   },
   mounted() {
   var _this = this;
   //监听A组件中的spot，并接受数据
   bus.$on("spot", function(msg) {
   _this.msg = msg;
   });
   }
   };
  </script>
  <style>
  p{
   font-size: 20px;
   color: darkcyan;
  }
  </style>

  2.4。 App.vue (Earth) を変更し、これら 2 つのコンポーネントを登録し、これら 2 つのコンポーネントのタグを追加します

<template>
 <p id="app">
 <A/>
 <hr>
 <B/>
 </p>
</template>
<script>
import A from &#39;./components/A&#39;
import B from &#39;./components/B&#39;
export default {
 name: &#39;App&#39;,
 components: {
 A,
 B
 }
}
</script>

• 3. 効果

• 上記は私が皆さんのためにまとめたものです。未来。

関連記事:

• Vue の計算プロパティのキャッシュ機能をオフにする方法 具体的な手順は何ですか?

vueで計算属性を変更しても選択値が変わらない問題の解決方法 具体的な操作は以下の通りです

iviewで選択ドロップダウンボックスのオプションがずれる問題の解決方法。具体的な操作は以下の通りです

Vue.jsの使い方 選択ドロップダウンリストを実装するには、具体的な操作は以下の通りです

Reactコンポーネントのパフォーマンス最適化について詳しく解説

vueの使い方ズーム、縮小、回転機能を実行しながら画像をトリミングする (詳細なチュートリアル)

以上がvue2.0で通信を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。