Vue3 の emitting と attr の違いの分析

Vue3 の emitting と attr の違いの分析

結論は

親コンポーネントでカスタム イベントが定義されている場合、子コンポーネントで宣言されていない場合は、親コンポーネントの $attrs に自動的にバインドされます。ただし、子コンポーネントで宣言されている場合は、親コンポーネントの $attrs には表示されません。

実践分析

出力と属性の違いを確認するために、次のコンポーネント構造を構築します。

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>

具体的な Vue ファイルとコードは次のとおりです (次の構文ではセットアップ構文シュガーが使用されていることに注意してください)。

アプリ.vue

<テンプレート>
<div>
コンポーネント 1 (楽しいイベントがあるが、emits では宣言されていない)
<com-one-vue @fun = 'call'/>
</div>
<div>
コンポーネント 1 (および、emits で宣言された fun2 イベント)
<com-one-vue @fun2 = 'call'/>
</div>
</テンプレート>
​
<スクリプトの設定>
'@vue/runtime-core' から provide, ref をインポートします。
'./components/comOne.vue' から comOneVue をインポートします。
'./components/comTwo.vue' から comTwoVue をインポートします。
'./components/comThree.vue' から comThreeVue をインポートします。
定数呼び出し = () => {
  コンソールログ('xx')
}
</スクリプト>

comOne.vue

<テンプレート>
    <button @click="f">ヘイヘイ</button>
</テンプレート>
​
<スクリプトの設定>
"@vue/runtime-core" から {useAttrs } をインポートします。
const 出力 = defineEmits(['fun2'])
定数 onFun は useAttrs() です。
定数f = () => {
    if(onFun)
    オンファン()
    出力('fun2')
}
コンソールログ(useAttrs())
</スクリプト> 

次に、コンソールを開くと次のことがわかります。

2 つのコンポーネント 1 では、最初のコンポーネント 1 のカスタム メソッド fun が emittings で宣言されていないため、その $attrs に onFun が表示され、その型はメソッドになります。

2 番目のコンポーネント 1 では、カスタム メソッド fun2 を定義しました。最初に子コンポーネントで fun2 を定義したため、2 番目のコンポーネント 1 の $attrs には fun2 は追加されません。

両方のコンポーネントはコンポーネント 1 ですが、カスタム イベントは互いに影響を及ぼさないことに注意してください。そのため、 fun カスタム メソッドは 2 番目のコンポーネント 1 の $attrs に表示されません。

同時に、2 つのボタンをクリックすると、fun メソッドと fun2 メソッドの両方が結果を出力していることがわかります。

したがって、この場合、これら 2 つの使用法の効果に違いはありません。

拡張機能

先ほどのデモを通じて、emits と attrs の使い方の違いや詳細がわかりましたが、実際にはほとんどの場合、両者の機能に違いはありません。では、どのように使用すればよいのでしょうか。

まず、emit は子コンポーネントで最初に宣言され、親コンポーネントによって参照されますが、attr は親コンポーネントによって子コンポーネント上で最初にカスタマイズされ、子コンポーネントは親コンポーネントの attr を参照してそれを使用します。この違いにより、イベントの使用法と特性に基づいて、どの方法を使用するかを決定できます。

  • コンポーネントがカスタム イベントを通じて親コンポーネントと頻繁に通信する必要がある場合は、emits を使用できます。
  • 親コンポーネントがカスタム イベントを通じて子コンポーネントと通信する必要があるが、その頻度は高くない場合は、 attrs を使用できます。ただし、親コンポーネントはカスタムイベントを通じて子コンポーネントと通信できない可能性があるため、対応する属性があるかどうかを判断する必要があります(ない場合は、未定義のエラーが発生します)。

これら 2 つの用途に関する公式見解を見てみましょう。

各コンポーネントによって発生したすべてのイベントを記録するには、emits を使用することを強くお勧めします。
これは、.native 修飾子を削除したため特に重要です。出力で宣言されていないイベント リスナーは、コンポーネントの $attrs にカウントされ、デフォルトでコンポーネントのルート ノードにバインドされます。

Vue3 では、.native 修飾子を削除すると、カスタム コンポーネントであるかどうかに関係なく、すべてのイベントが実際にコンポーネントの attrs に記録されます。次のように:

したがって、独自のカスタム イベントとネイティブ イベントを区別する必要がある場合は、emits を使用して各コンポーネントによってトリガーされるイベントを定義するのが最適です。同時に、実際には、emits で宣言されていない限り、すべてのイベントは、カスタム イベントに限定されず、デフォルトで親コンポーネントの attrs にバインドされます。

要約する

Vue3 の emitting と attrs の違いについての記事はこれで終わりです。Vue3 の emitting と attrs の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成
  • Vue3 の父子値転送に関する簡単な説明
  • Vue3における非親子コンポーネント通信の詳細な説明
  • vue3で注意すべき2つのポイントを詳しく解説:セットアップ
  • vue3 再帰コンポーネントカプセル化の全プロセス記録
  • Vue3 (パート 2) Ant Design Vue の統合

<<:  シンプルな HTML ビデオ プレーヤーを実装する方法

>>:  WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。

推薦する

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

LinuxシステムにDockerをインストールするプロセス

このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...

Linux で複数のファイルの名前を一括で変更する方法

Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...

...

MySql における特殊演算子の使用の概要

序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...

JavaScript でよく使われる 3 つの Web エフェクトの詳細な説明

目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...

jQueryはマウスドラッグ画像機能を実装します

この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...

MySQL 5.7.23 バージョンのインストールチュートリアルと設定方法

MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...

mysql data_dirの変更によって発生するエラー問題を解決する

今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...

CentOS 7.4 で MySQL 5.7.28 バイナリモードをインストールする方法

Linuxシステムバージョン: CentOS7.4 MySQL バージョン: 5.7.28 Linu...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題

Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...