Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

Vue3 の SetUp 関数のプロパティとコンテキスト パラメータの詳細な説明

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} を返します
  }
});
</スクリプト>

セットアップ機能を使用する際に注意すべき点がいくつかあります。

  • セットアップ関数はbeforeCreateとcreatedの間で実行されます。
  • セットアップは作成中に実行されるため、コンポーネントは作成されたばかりで、データとメソッドはまだ初期化されていないため、データとメソッドはセットアップでは使用できません。
  • セットアップではこれは未定義を指します
  • セットアップは同期のみ可能で、非同期は不可

要約する

Vue3 の SetUp 関数の props と context パラメータに関するこの記事はこれで終わりです。Vue3 の SetUp 関数のパラメータに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3 親子コンポーネント値転送における props 使用の詳細の簡単な分析
  • Vue のコンポーネントの props 使用方法の詳細な説明
  • Vueのコンポーネントのprops属性について詳しく説明します
  • Vue3 での props コンポーネントの抽出

<<:  NginxにLuaモジュールを追加する方法

>>:  MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例

推薦する

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

vscode を使用したリモート Linux 開発の実装

過去に別れを告げるvscode にリモート SSH が導入される前は、Linux サーバー開発者の多...

Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...

MySQLがトランザクション分離を実装する方法の簡単な分析

目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...

Nginx 正規表現の詳細な説明

Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバーであり、IM...

jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

Zabbix は DingTalk のアラーム機能を画像付きで設定します

実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

ウェブページのカラーマッチング例分析: 緑色のカラーマッチングウェブページ分析

<br />緑は黄色と青(寒色と暖色)の中間の色で、より穏やかな色です。そのため、緑は最...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

CSS で平均レイアウトを実現するために負のマージンを使用する例

均等に分散されたレイアウトの場合、通常はネガティブ マージン方式を使用します。次の図は平均的なレイア...