デモ例: サブコンポーネント: <テンプレート> <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 つあります。
Vue での props の使い方に関するこの記事はこれで終わりです。Vue での props の使い方についてさらに詳しく知りたい場合は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: JDKネイティブスレッドプールのバグを修正するTomcatの実装原理
>>: CSS 水平プログレスバーと垂直プログレスバーの実装コード
この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内...
MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...
目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...
目次Django でのタイムゾーン設定USE_TZ=真USE_TZ=偽Linux コンテナでのタイム...
この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...
関数の起源最近、水平スクロール バーを必要とする H5 に取り組んでいました。いくつかのドキュメント...
目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...
この記事では、クリックするとランダムグラフィックの生成を実現するJavaScriptの具体的なコード...
最近MySQLデータベースのバージョンを変更する必要があり、それを記録するために記事を書きます1. ...
序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
目次1. はじめに2. まずLinux環境を紹介しましょう3. TIME_WAIT状態遷移図4. 継...
ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...