vueイベントバスは廃止されるのでしょうか？

vue3 は、セキュリティが低いため、グローバル イベント バスをキャンセルしました。グローバル イベント バスは、グローバルな任意のコンポーネントの通信テクノロジです。つまり、任意のコンポーネント間の通信を実現できます。 vue3 でグローバルイベントバスを使用したい場合は、サードパーティライブラリの mitt または tiny-emitter を導入する必要があります。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue3 は、セキュリティが低いため、グローバル イベント バスをキャンセルしました。

#vue のグローバル イベント バスグローバル イベント バスは、グローバルな任意のコンポーネント通信テクノロジです。

名前が示すように、任意のコンポーネント間の通信を実現できます。

その通信はパペット (すべてのコンポーネントからアクセスできるパペット) を通じて行われ、vue では

$bus

という名前が付けられます。 vue2エントリ ファイル mian.js でライフ サイクル フックを直接使用できます

beforecreated

直接作成します $bus
<pre class="brush:js;toolbar:false;">beforeCreate() { Vue.prototype.$bus = this }</pre>

マウントする前に忘れずにフック

を記述してください。 使用する場合:

データを受信する必要があるコンポーネントで
• mounted

  フック バインディング イベント モニタリングを使用します

  mounted() {
    this.$bus.$on('hello',(data) => {
      console.log(data);
    })
  },

このメソッドは、データを送信する必要があるコンポーネントで送信する必要がある操作でトリガーできます

• methods: {
    sendStudentName(){
      this.$bus.$emit('hello',this.name)
    }
  },

コンポーネントが破棄されたら、イベントのバインドを解除し、バインドされていた場所でもバインドを解除することを忘れないでください。

• vue3

vue3 ではグローバル イベント バスがキャンセルされているため、使用する場合はサードパーティ ライブラリを導入する必要があります

mitt または tiny-emitter1. mitt ライブラリをインストールします

beforeDestroy() {
  this.$bus.$off('hello')
},

2. js ファイルをルート ディレクトリにカプセル化して、コンポーネントにインポートされます。

ファイルに名前を付けるのが最善です。たとえば、eventBus.js

コンテンツ:

npm i mitt -s

3。

1) 相互に通信するコンポーネントは js

//导入
import mitt from 'mitt';
 //定义,定义也最好见名知义
const emitter = mitt();
 //暴露
export default emitter;

# をインポートする必要があります ##2) データを受信するコンポーネントは setup() でイベント リスナーにバインドされます

import emitter from '../../eventBus'

ここでのアロー関数は通常の関数で置き換えることもできます

3) Send Data は、データ コンポーネントがトリガーされたときに送信できます。コンポーネントが破棄された場合はイベントをアンバインドします

setup(){
  emitter.on('event',(info) => {
    ...
  })
  return{}
}

通常の関数を使用する場合は第二引数に関数を入れますが、アロー関数の場合は記述する必要はありません。上記と同様 onEvent

[関連する推奨事項: vuejs ビデオ チュートリアル 、

Web フロントエンド開発

]

以上がvueイベントバスは廃止されるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。