デモ例: サブコンポーネント: <テンプレート> <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 水平プログレスバーと垂直プログレスバーの実装コード
MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...
【1】<i></i>タグと<em></em>タグ同じ...
目次ネプローダーをインストールするプラグインのインポート始める配置折りたたみディスプレイノードをクリ...
VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...
これまでのプロジェクトはすべて Windows システム環境にデプロイされていました。今回は Lin...
目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...
MySQL 基本データ型一般的な MySQL データ型の概要 ![1036857-201708011...
EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...
なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...
背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...
<br />この Web ページ制作スキル チュートリアルは、Web サイトのアイコンを...
序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...
RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...
MySQL 5.7.18 無料インストール版のインストールチュートリアルMySQL は現在、世界で最...