Vue での props の使い方の紹介

Vue での props の使い方の紹介

序文:

Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続することができます。つまり、子コンポーネントは親コンポーネントから渡されたデータを受け取ることができます。たとえば、子コンポーネントが親コンポーネントのデータを参照する場合、props で変数を宣言し、この変数で親要素のデータを参照することができます。

デモ例:

サブコンポーネント:

<テンプレート>

  <div>

    <h3>私は {{name}}、年齢は {{age}}、趣味は {{hobby}} です。}</h3>、{{flag}}

  </div>

</テンプレート>



<スクリプト>

エクスポートデフォルト{

    名前:'Cpn',

    // シンプルな受信 /* props:['age','hobby','name'], */

    // 受信するデータを宣言し、props を宣言するときに受信データを制限します:{

        名前: {

            //型を宣言する type:String,

            //必須かどうかを宣言します: true、

            // デフォルト値を宣言する default:'デフォルト値'

        },

        年:{

            タイプ:数値、

            必要:true、

            デフォルト:18

        },

        趣味:

            タイプ:文字列、

            必要:false

        },

        フラグ:{

            タイプ:ブール値、

            必要:false

        }

    }

}

</スクリプト>

親コンポーネント:

<テンプレート>

  <div id="アプリ">

    <!-- <cpn name='李明' age="22" hobby="ボール遊び"></cpn>

    <cpn name="Xiaohong" age="20" hobby="ピアノを弾くこと"></cpn> -->

    <cpn name='李明'></cpn>

    <cpn hobby="プログラミング" :flag="フラグ"></cpn>

      <!--注: 現在のコンポーネントデータ内のデータを子コンポーネントに渡す場合は、v-bing: 変数名 = "変数名" の形式で渡す必要があります。渡されるデータがデータ内にない場合は、バインディング命令、つまり v-bind (次のように省略できます) を追加する必要はありません -->

    <button @click="changeFlag">切り替え</button>

  </div>

</テンプレート>

<スクリプト>

'./components/Cpn.vue' から Cpn をインポートします。

エクスポートデフォルト{

  コンポーネント: { Cpn },

  名前:「アプリ」、

  データ() {

    戻る {

      フラグ:false

    }

  },

  メソッド: {

    フラグを変更する(){

      console.log(このフラグ)

      this.flag=!this.flag;

      console.log(このフラグ)

    }

  },

}

</スクリプト>

上記のプログラムを実行すると、親コンポーネントのボタンをクリックして値を切り替えると、子コンポーネントが受け取る値もそれに応じて変更されることがわかります。

子コンポーネントが親コンポーネントからデータを受信する方法は 2 つあります。

  • 方法1:シンプルな受信、受信する変数名を指定するだけ
  • 方法2:特定の受信、受信した変数ごとにデータ型、空にできるかどうか、デフォルト値を選択的に指定する

Vue での props の使い方に関するこの記事はこれで終わりです。Vue での props の使い方についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue サブコンポーネントウォッチがプロパティをリッスンしない問題の解決方法
  • Vueでpropsを使用して値を渡す方法
  • Vue3 親子コンポーネント値転送における props 使用の詳細の簡単な分析
  • Vue3.0 で props メソッドをリッスンする方法

<<:  JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

>>:  CSS 水平プログレスバーと垂直プログレスバーの実装コード

推薦する

JavaScript キャンバスで 9 マスのグリッドカットの効果を実現

この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内...

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

Docker コンテナにデプロイされた Django のタイムゾーンの問題

目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...

CSS はモバイル デバイスで水平スクロール ナビゲーション バーを実装します (PC デバイスにも適用可能)

関数の起源最近、水平スクロール バーを必要とする H5 に取り組んでいました。いくつかのドキュメント...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

JavaScriptはクリックするとランダムなグラフィックを生成します

この記事では、クリックするとランダムグラフィックの生成を実現するJavaScriptの具体的なコード...

Windows での mysql-5.7.28 のダウンロード、インストール、および構成に関する詳細なグラフィックとテキストのチュートリアル

最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...

MySQLデータベースの一般的な最適化操作のまとめ(経験共有)

序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...

MySQL ページング中にオフセットが大きすぎる場合の SQL 最適化の経験の共有

問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...

LinuxソースコードからTIME_WAITの期間を分析する

目次1. はじめに2. まずLinux環境を紹介しましょう3. TIME_WAIT状態遷移図4. 継...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...