結論は親コンポーネントでカスタム イベントが定義されている場合、子コンポーネントで宣言されていない場合は、親コンポーネントの $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を使用して公開鍵と秘密鍵を生成します。
この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...
注 1: 上の画像の背景全体がこの Web ページのフルサイズであり、中央の小さなボックスがブラウザ...
el-dialogをコンポーネントとしてカプセル化するelement-ui を使用する場合、ポップア...
序文JavaScript では、document.querySelector("#demo...
起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...
目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...
目次1. 糖衣構文とは何ですか? 2. VUE の構文糖とは何ですか? 1. 最も一般的な構文シュガ...
この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...
目次DockerにRedisをインストールする1. Redisイメージを見つける2. Redisイメ...
最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...
使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...
質問CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポート...
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...
<tfoot> タグは、テーブル フッターのスタイルを定義するために使用されます。基本構...