Vueバスの簡単な使い方

シナリオの説明:

コンポーネント A にはコンポーネント B と C が含まれ、コンポーネント B にはコンポーネント D が含まれます。コンポーネント D がコンポーネント A 内のコンポーネント C のメソッドをトリガーする場合はどうなるでしょうか。

もちろん解決策はあります。vuex vuex使用して状態を管理したり、 $emitを使用して状態を渡すこともできますが、私はバスメソッドを試してみたいと思います。

次のように：

バスのエミットは D コンポーネントでトリガーされ、次にバスのオンは A コンポーネントのメソッドをトリガーするために使用されます。

コンポーネントD

データロード(){
   console.log('読み込み完了トリガーイベント');
   this.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('イベント名', パラメータ) // 2番目はパラメータになる},

コンポーネントA

 マウント() {
    // アイテム内のデータの読み込みをリッスンします this.$bus.$on('itemDataLoad', () => {
      console.log('データの読み込みが完了しました');
    })
    // this.$bus.$on('イベント名', コールバック関数 (パラメータ))
  },

もちろん、コンポーネント A では、コンポーネント C のイベントはthis.$refsなどによってトリガーされる可能性があります。

もう 1 つのステップは、 $busデフォルトでは存在しないことです。 this.$bus為undefined 。

心配しないでください。main.js に $bus を追加してください。

// バス バス vue インスタンス Vue.prototype.$bus = new Vue()

もちろん、バスはライフサイクル中に削除できます。

this.$bus.$off();

記録カプセル型手ぶれ防止機能

// デバウンス関数: function (fun, delay) {
    タイマーを null にする
    // 関数を呼び出すときに渡されたパラメータの値を受け取ります... args は複数にすることができます return function (...args) {
      if (tiemr) 戻る
      タイマー = setTimeout(() => {
        fun.apply(これ、引数)
      }、 遅れ）;
    }
  }

const リフレッシュ = デバウンス(xxx, 500)

refresh('パラメータ1', 'パラメータ2', 'パラメータ3')

Vue のバスの簡単な使い方に関するこの記事はこれで終わりです。Vue のバスの簡単な使い方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: