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

以下もご興味があるかもしれません: