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