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を使用して公開鍵と秘密鍵を生成します。

推薦する

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft などのプロパティの図。

注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...

要素UIポップアップコンポーネントをカプセル化する手順

el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...

Vue における ref と $refs の紹介と使用例

序文JavaScript では、document.querySelector("#demo...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

伝説的な VUE 構文シュガーは何をするのでしょうか?

目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

DockerにRedisコンテナをインストールするための実装手順

目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...

複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません

最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...

プライベートウェアハウス(レジストリとハーバー)を構築するためのDockerの実装

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

位置固定オフセット問題を解決する方法の詳細な説明

質問CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポート...

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

HTML テーブルタグチュートリアル (46): テーブルフッタータグ

<tfoot> タグは、テーブル フッターのスタイルを定義するために使用されます。基本構...