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

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

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