vue2.x研究ノート（19）

その後、前のコンテンツ：https : //www.cnblogs.com/yanggb/p/12631022.html。

プログラムによるイベントリスナー

以前の調査では、[v-on]命令によってインターセプトされる可能性がある[$ emit]グローバル属性の使用法をすでに知っていますが、vueインスタンスはそのイベントインターフェイスで他のメソッドも提供します。

1. [$ on（eventName、eventHandler）]を介してイベントをリッスンします。

2. [$ once（eventName、eventHandler）]を使用して、一度に1つのイベントをリッスンします。

3. [$ off（eventName、eventHandler]を介してイベントのリッスンを停止します。

通常は使用しませんが、コンポーネントインスタンスでイベントを手動でリッスンする必要がある場合に役立ちます。これらは、コード編成ツールにも使用できます。たとえば、サードパーティライブラリを継承する次のパターンがよく見られます。

// この日付ピッカーを入力ボックスに一度に追加すると、DOMにマウントされます。Mounted 
：function （）{
   // Pikadayはサードパーティの日付ピッカーライブラリです
  this .picker = new Pikaday（{ 
    field：this 。$ refs.input、
    format： 'YYYY-MM-DD' 
  }）
}、
// コンポーネントが破棄される前に、日付ピッカーも破棄されます。
beforeDestroy：function （）{
   this .picker.destroy（）
}

ここには2つの潜在的な問題があります。

1.ピッカーをこのコンポーネントインスタンスに保存する必要があります。可能であれば、ライフサイクルフックによってのみアクセスできるようにするのが最善です。これは深刻な問題ではありませんが、乱雑と見なすことができます。

2.ビルドコードはクリーンアップコードから独立しているため、ビルドしたすべてをプログラムでクリーンアップすることが難しくなります。

これらの2つの問題は、プログラムリスナーを通じて解決する必要があります。

マウント：関数（）{
   var picker = new Pikaday（{ 
    field：this 。$ refs.input、
    format： 'YYYY-MM-DD' 
  }）

  this。$ once（ 'hook：beforeDestroy'、function （）{ 
    picker。 destroy（）
  }）
}

ここのフックはコンポーネント名です。この戦略を使用すると、複数の入力ボックス要素で同時に異なるピカデーを使用することもでき、新しい各インスタンスはプログラムによって後で自動的にクリーンアップできます。

マウント：関数（）{
   this .attachDatepicker（ 'startDateInput' ）
   this .attachDatepicker（ 'endDateInput' ）
}、
メソッド：{ 
  attachDatepicker：function （refName）{
     var picker = new Pikaday（{ 
      field：this 。$ refs [refName] 、
      形式： 'YYYY-MM-DD' 
    }）

    this。$ once（ 'hook：beforeDestroy'、function （）{ 
      picker.destroy（）
    }）
  } 
}

ただし、それでも、1つのコンポーネントで多くのビルドとクリーニングを行う必要がある場合は、通常、より多くのモジュールコンポーネントを作成するのが最善の方法です。したがって、上記の例では、公式ドキュメントは再利用可能な<input-datepicker>コンポーネントの作成を推奨しています。

注意すべきもう1つの点は、vueのイベントシステムはブラウザーのeventtarget apiとは異なることです。これらは同様に機能しますが、[$エミット]、[$オン]、および[$オフ]は[ディスパッチイベント]、[アドイベントリスナー]ではありません]そして[removeEventListener]エイリアスでは、基礎となる実装も異なります。

「私は今でもあなたがとても好きです、無人の90,000マイルを振るKunpengのように。」

おすすめ