1. 親が子コンポーネントに値を渡す親コンポーネント: <テンプレート> <div> <p class="father">父コンポーネント</p> <child:sid="id"></child> </div> </テンプレート> <スクリプト> './child' から子をインポートします エクスポートデフォルト{ コンポーネント: 子供 }, データ() { 戻る { id:'1234' // 親コンポーネントから子コンポーネントに渡される値} } } </スクリプト> サブコンポーネント: <テンプレート> <div> <p class="child">子コンポーネント</p> <p class="child">受け取った親コンポーネントの値は次のとおりです: {{ sid }}</p> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 小道具:{ シド:{ タイプ:文字列、 デフォルト: '0' } }, // プロパティ:["sid"], データ() { 戻る { } } } </スクリプト> 例: ①sidはサブコンポーネントに渡される値です。「=」の前のsidはサブコンポーネントで受け入れられる変数名と一致している必要があることに注意してください。 ② 子コンポーネントで props を使用して、入力値を受け入れます。オブジェクト型として記述したり、型とデフォルト値を指定したり、文字列として直接記述したりできます。 ③サブコンポーネント内で直接使用することも、関数内でthis.sidを使用してアクセスすることもできます。 2. 子コンポーネントが親コンポーネントに値を渡す親コンポーネント: <テンプレート> <div> <p class="father">父コンポーネント</p> <p class="father">子コンポーネントの値を受け取ります: {{childSid}}</p> <child @passValue="親パス値"></child> </div> </テンプレート> <スクリプト> './child' から子をインポートします エクスポートデフォルト{ コンポーネント: 子供 }, データ() { 戻る { childSid:'' // 子コンポーネントの値を受け取る} }, メソッド: { 親パス値(データ) { this.childSid = データ; } } } </スクリプト> サブコンポーネント: <テンプレート> <div> <p class="child">子コンポーネント</p> <button @click="valueClick">値を渡す</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { } }, メソッド: { 値クリック() { これを$emit('passVaule',19)します } } } </スクリプト> 例: ① 子コンポーネントに$emitをトリガーするメソッドを指定します。最初のパラメータは、親コンポーネントが子コンポーネントバインディングに導入する関数名(「passVaule」)であり、2番目は渡される値です(19) ②親コンポーネントに関数をバインドし、親コンポーネントにバインドされた関数を呼び出し、その中の値に対して受信操作を実行する 3. 子コンポーネントが親コンポーネントのメソッドを呼び出す親コンポーネント: <テンプレート> <div> <p class="father">父コンポーネント</p> <child @funValue="親FunValue"></child> </div> </テンプレート> <スクリプト> './child' から子をインポートします エクスポートデフォルト{ コンポーネント: 子供 }, データ() { 戻る { } }, メソッド: { 親FunValue() { console.log('親コンポーネント内の関数が呼び出されます'); } } } </スクリプト> サブコンポーネント: <テンプレート> <div> <p class="child">子コンポーネント</p> <button @click="funClick">親コンポーネントメソッドを呼び出す</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { } }, メソッド: { funClick() { this.$emit('funVaule') } } } </スクリプト> 例: ①子から親に値を渡すのと似ていますが、値を渡すのではなく、親コンポーネントのバインドされた関数を呼び出します。 4. 親が子コンポーネントのメソッドを呼び出す親コンポーネント: <テンプレート> <div> <p class="father">父コンポーネント</p> <button @click="childClick">子コンポーネントメソッドを呼び出す</button> <child ref="mychild"></child> </div> </テンプレート> <スクリプト> './child' から子をインポートします エクスポートデフォルト{ コンポーネント: 子供 }, データ() { 戻る { } }, メソッド: { 子クリック() { this.$refs.mychild.testNum(1) } } } </スクリプト> サブコンポーネント: <テンプレート> <div> <p class="child">子コンポーネント</p> </ボタン> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { } }, メソッド: { testNum(データ) { console.log('子コンポーネントのメソッドが呼び出されました:', data); } } } </スクリプト> 例: ① 親コンポーネントで、インポートした子コンポーネントに ref="mychild" と記述します。Mychid は自身に定義されたインスタンス名です。 ②関数内にthis.refs.mychild.testNum()と記述します。「testNum」は子コンポーネントで定義された関数名です。 ③子コンポーネントは関数を定義し、親コンポーネントがそれを呼び出すようにします ④このメソッドは値を渡すこともできます。括弧内の値を渡すとサブコンポーネントがそれを受け取ります。 以上がVue親子コンポーネントの相互値転送と呼び出しの詳細です。Vue親子コンポーネントの値転送と呼び出しの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu での MySQL へのリモート ログインのインストールと設定に関するチュートリアル
>>: VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
この記事では、CSS で放射状グラデーションを使用して、次の図に示すクーポン スタイルの効果を実現す...
バージョンチェーンInnoDB エンジン テーブルでは、クラスター化インデックス レコードに 2 つ...
一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...
1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...
ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....
//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...
目次1. 親コンポーネントが子コンポーネントに値を渡す(props) 2. サブコンポーネントは親コ...
目次背景仮想ファイルのインポート例書類タイプスクリプトのサポート要約する背景新しいプロジェクトで v...
序文Excel は強力で、広く使用されています。 Web アプリケーションの登場と改善に伴い、ユーザ...
<テンプレート> <div class="アプリコンテナ"&...
この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...
複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...
背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...
以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...