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 ユーザーと権限、およびルートパスワードをクラックする方法の例

推薦する

nginx 設定の場所の概要の場所の通常の書き込みと書き換えルールの書き込み

1. 場所の正規表現例を見てみましょう: 場所 = / { # 完全一致 / 、ホスト名の後に文字列...

uni-appがNFC読み取り機能を実装

この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...

Centos7 での NFS サービス構築の紹介

目次1. サーバー2. クライアント3. テストサービス1. サーバー1. YUMソースを使用してN...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

Windows 10 で MySql の解凍バージョンをインストールして構成する方法のチュートリアル

Windows 10 で MySql データベースの解凍バージョンをインストールするステップ 1: ...

vueはEle.me UIを使用してteambitionのフィルタリング機能を模倣します

目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

UbuntuはSSHサービスのリモートログイン操作を開始します

ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

XHTMLにおけるH1タグの位置について

最近、H1 については多くの議論が行われていますが (記事のコンテンツ ページ内)、おおよそ 2 つ...

MySQL 5.7.27 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.27 winx64のインストールと設定方法を参考までに紹介します。...

NestJsはMongooseを使用してMongoDBを操作する

最近、NestJs フレームワークを学び始めました。学習コストは他のフレームワークよりもはるかに高く...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...