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 ユーザーと権限、およびルートパスワードをクラックする方法の例
目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...
過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...
管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...
目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...
Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...
JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...
実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...
序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...
あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...
# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...
<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...
以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...
Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...
均等に分散されたレイアウトの場合、通常はネガティブ マージン方式を使用します。次の図は平均的なレイア...