1. setUp関数の最初のパラメータprops
最初のパラメータのプロパティ: Props は、親コンポーネントから子コンポーネントに渡されるすべてのデータを含むオブジェクトです。 子コンポーネントで受け取るには props を使用します。 構成によって宣言され渡されたすべてのプロパティを含むオブジェクト つまり、親コンポーネントから子コンポーネントに渡された値を props を通じて出力したい場合です。 構成を受け取るには props を使用する必要があります。つまり、props:{......} Propsを通じて設定を受け入れない場合、出力値は未定義になります。 <テンプレート> <div class="box"> 親コンポーネント</div> <no-cont :mytitle="メッセージ" othertitle="他の人のタイトル" @sonclick="sonclick"> </no-cont> </テンプレート> <script lang="ts"> 「../components/NoCont.vue」からNoContをインポートします。 エクスポートデフォルト{ 設定 () { メッセージを = { タイトル:「親コンポーネントから子コンポーネントへのデータ」 } 関数sonclick(msss:文字列){ コンソール.log(msss) } {msg,sonclick} を返す }, コンポーネント:{ 続きなし } } </スクリプト> <テンプレート> <div @click="sonHander"> 私は子コンポーネントのデータです</div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,setup} をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'NoCont'、 // 受け入れられません // props:{ // タイトル:{ // タイプ:オブジェクト // } // }, セットアップ(プロパティ、コンテキスト){ console.log('props==>',props.mytitle);//出力値は未定義です 関数sonHander(){ context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます') } {sonHander} を返す } }); </スクリプト> props.mytitle によって出力される値が未定義なのはなぜですか? 受信構成に props を使用しなかったためです。今すぐ 小道具:{ 私のタイトル:{ タイプ:オブジェクト } }, 受け入れ設定を追加すると 2. パラメータコンテキストの説明2 番目のパラメータ: context はオブジェクトです。 attrs (現在のタグオブジェクトのすべての属性を取得) があります ただし、このプロパティはすべてのオブジェクトを受け取るために props で宣言されていません。 propsを使用して値を取得し、propsで取得したい値を宣言する場合 すると、得られる値は未定義になります 注記: attrs の値を取得するために、props で受信を宣言する必要はありません。 最初のパラメータpropsはpropsで宣言する必要がある値を取得します 発行イベント配布があります(イベントを使用して親コンポーネントに渡す必要があります) スロットがあります <テンプレート> <div @click="sonHander"> 私は子コンポーネントのデータです</div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,setup} をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'NoCont'、 小道具:{ 私のタイトル:{ タイプ:オブジェクト } }, セットアップ(プロパティ、コンテキスト){ //出力 {title: 親コンポーネントから渡された値} コンソールにログ出力します。 // 他の人のタイトルを出力します [値を取得するにはコンテキストを使用します。値を受け入れるためにプロパティを使用する必要はありません] console.log('context==> ',context.attrs.othertitle); // コンテキストは受け入れるために props を使用する必要がないため、undefined を出力します。 console.log('contextmytitle==> ',context.attrs.mytitle); 関数sonHander(){ context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます') } {sonHander} を返す } }); </スクリプト> 3. 子コンポーネントが親コンポーネントにイベントをディスパッチする <テンプレート> <div @click="sonHander"> 私は子コンポーネントのデータです</div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,setup} をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'NoCont'、 小道具:{ 私のタイトル:{ タイプ:オブジェクト } }, セットアップ(プロパティ、コンテキスト){ 関数sonHander(){ context.emit('sonclick','子コンポーネントが親コンポーネントに渡されます') } {sonHander} を返す } }); </スクリプト> 4. イベントディスパッチを最適化する 2番目のパラメータcontextはオブジェクトであることが分かっています オブジェクトには3つの属性 attrs、slots、emit があります イベントがディスパッチされたら、emitを使用するだけです <テンプレート> <div @click="sonHander"> 私は子コンポーネントのデータです</div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,setup} をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'NoCont'、 小道具:{ 私のタイトル:{ タイプ:オブジェクト } }, セットアップ(props,{attrs,slots,emit}){ // イベントを直接ディスパッチするには、emit を使用します。function sonHander(){ emitting('sonclick','子コンポーネントが親コンポーネントに渡されます') } {sonHander} を返す } }); </スクリプト> 5. 親コンポーネントから渡された値を取得する propsパラメータを使用して値を取得します そして値を取得するためにattrsを使用します <テンプレート> <hr/> <h2>サブコンポーネント</h2> <div @click="sonHander"> 私は子コンポーネントのデータです</div> <h2>props 宣言を使用して ==>{{ mytitle } を受け取ります}</h2> <h2>パラメータ attrs を使用して ==>{{ attrs.othertitle } を取得します}</h2> </テンプレート> <script lang="ts"> 'vue' から {defineComponent,setup} をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'NoCont'、 小道具:{ 私のタイトル:{ タイプ:オブジェクト } }, セットアップ(props,{attrs,slots,emit}){ 関数sonHander(){ emitting('sonclick','子コンポーネントが親コンポーネントに渡されます') } {sonHander,attrs} を返します } }); </スクリプト> セットアップ機能を使用する際に注意すべき点がいくつかあります。
要約するVue3 の SetUp 関数の props と context パラメータに関するこの記事はこれで終わりです。Vue3 の SetUp 関数のパラメータに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例
1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...
この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...
目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...
1. HTML 画像 <img> 1. <img> タグとその src 属性...
Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...
目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...
Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...
構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...
ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...
トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...
この記事では、MySQL 5.7.27 winx64のインストールと設定方法を参考までに紹介します。...
最近、NestJs フレームワークを学び始めました。学習コストは他のフレームワークよりもはるかに高く...
目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...