結論は親コンポーネントでカスタム イベントが定義されている場合、子コンポーネントで宣言されていない場合は、親コンポーネントの $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 を参照してそれを使用します。この違いにより、イベントの使用法と特性に基づいて、どの方法を使用するかを決定できます。
これら 2 つの用途に関する公式見解を見てみましょう。
Vue3 では、.native 修飾子を削除すると、カスタム コンポーネントであるかどうかに関係なく、すべてのイベントが実際にコンポーネントの attrs に記録されます。次のように: したがって、独自のカスタム イベントとネイティブ イベントを区別する必要がある場合は、emits を使用して各コンポーネントによってトリガーされるイベントを定義するのが最適です。同時に、実際には、emits で宣言されていない限り、すべてのイベントは、カスタム イベントに限定されず、デフォルトで親コンポーネントの attrs にバインドされます。 要約するVue3 の emitting と attrs の違いについての記事はこれで終わりです。Vue3 の emitting と attrs の違いについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: シンプルな HTML ビデオ プレーヤーを実装する方法
>>: WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
このブログでは、Docker をインストールするプロセスを簡単な手順で説明します。Docker のイ...
この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...
Linux では、通常、ファイルの名前を変更するために mv コマンドを使用します。これは、単一のフ...
序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...
目次1要素オフセットシリーズ1.1 オフセットの概要1.2 オフセットとスタイルの違い視覚領域クライ...
この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...
MySQL を自分でインストールするのに 3 時間かかりました。チュートリアルはたくさんあるにもかか...
今日は、新しく購入した Alibaba Cloud ECS 環境 (Ubuntu 16.04 LTS...
Linuxシステムバージョン: CentOS7.4 MySQL バージョン: 5.7.28 Linu...
前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...
実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...
では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...