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 水平プログレスバーと垂直プログレスバーの実装コード

推薦する

複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明

MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...

CSS レスポンシブ レイアウト システムの例コード

レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

Vueのvue-tree-colorコンポーネントの組織構造図の事例を詳しく解説

目次ネプローダーをインストールするプラグインのインポート始める配置折りたたみディスプレイノードをクリ...

VMware Workstation 14 Pro は CentOS 7.0 をインストールします

VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...

CentOS で RPM を使用して MySQL 5.6 をインストールするチュートリアル

これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...

Windows に Docker と docker-compose スイートをインストールするための詳細なチュートリアル

目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...

mysql8.0.19 の基本データ型の詳細な説明

MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...

Linux クラウド サーバーに新しいディスクをマウントする方法

背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...

IE アドレスバーのアイコン表示問題を解決する 3 つの手順

<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...

MySQL 5.7.18 無料インストールバージョンの設定チュートリアル

MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...