Vueバスの簡単な使い方

Vueバスの簡単な使い方

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueコンポーネントのカスタムイベントについてどれくらい知っていますか
  • Vue コンポーネントの学習範囲を限定した詳細な説明
  • Vue パブリッシュ・サブスクライブモデルの実装プロセス図
  • Vue におけるパブリッシュ サブスクライブ モデルの実際の適用の詳細な説明
  • Vueバスの仕組み(バス)の知識ポイントを詳しく解説
  • Vue コンポーネントのイベント バスとメッセージの公開およびサブスクリプションの詳細な説明

<<:  Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法

>>:  MySql COALESCE 関数の使用コード例

推薦する

ローカルサーバーを構築するためのwebpack-dev-serverの実装

目次序文webpack-deb サーバーwebpack-dev-server 起動エラー解決策1解決...

VM VirtualBox 仮想マシンのマウント共有フォルダ

一つの環境CentOS 7にVMware Toolsをインストールしてホストの共有フォルダへのアクセ...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

Vue のレスポンシブ原則と双方向データの詳細な分析

応答性を実現するための object.defineProperty の理解observe/watch...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

Vue+Openlayerはmodifyを使用して要素の完全なコードを変更します

Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。 ...

js の一般的でない演算子と演算子の概要

一般的な演算子と JavaScript の演算子の概要カテゴリオペレーター算術演算子+、–、*、/、...

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

ローカルストレージにブール型の値を保存する際の落とし穴を解決する

LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...

Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...

MySQL 時間差関数 (TIMESTAMPDIFF、DATEDIFF)、日付変換計算関数 (date_add、day、date_format、str_to_date)

1. 時間差関数(TIMESTAMPDIFF、DATEDIFF) MySQLを使用して時間差を計算...

MySQL カーソルの定義と使用法

カーソルの作成まず、MySql でデータ テーブルを作成します。 存在しない場合はテーブルを作成 `...

タブ切り替え効果を実現するJavaScript

この記事では、タブ切り替え効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...

jsネイティブカルーセルプラグインの制作

この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...