1. 子コンポーネントのthis.$parent.eventを通じて親コンポーネントメソッドを直接呼び出します。<!-- 親コンポーネント --> <テンプレート> <div> <子></子> </div> </テンプレート> <スクリプト> '~/components/dam/child' から子をインポートします。 エクスポートデフォルト{ コンポーネント: 子供 }, メソッド: { 父親メソッド() { コンソールにログ出力します。 } } }; </スクリプト> <!-- 子コンポーネント --> <テンプレート> <div> <button @click="childMethod()">クリック</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ メソッド: { 子メソッド() { this.$parent.fatherMethod(); } } }; </スクリプト> 2. 子コンポーネントで$emitを使用して親コンポーネントにイベントをトリガーし、親コンポーネントはこのイベントをリッスンします。<!-- 親コンポーネント --> <テンプレート> <div> <child @fatherMethod="fatherMethod"></child> </div> </テンプレート> <スクリプト> '~/components/dam/child' から子をインポートします。 エクスポートデフォルト{ コンポーネント: 子供 }, メソッド: { 父親メソッド() { コンソールにログ出力します。 } } }; </スクリプト> <!-- 子コンポーネント --> <テンプレート> <div> <button @click="childMethod()">クリック</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ メソッド: { 子メソッド(){ this.$emit('fatherMethod'); } } }; </スクリプト> 3. 親コンポーネントはメソッドを子コンポーネントに渡し、子コンポーネント内で直接メソッドを呼び出す<!-- 親コンポーネント --> <テンプレート> <div> <child :fatherMethod="fatherMethod"></child> </div> </テンプレート> <スクリプト> '~/components/dam/child' から子をインポートします。 エクスポートデフォルト{ コンポーネント: 子供 }, メソッド: { 父親メソッド() { コンソールにログ出力します。 } } }; </スクリプト> <!-- 子コンポーネント --> <テンプレート> <div> <button @click="childMethod()">クリック</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 小道具: { 父親メソッド: { タイプ: 関数、 デフォルト: null } }, メソッド: { 子メソッド(){ if (this.fatherMethod) { this.fatherMethod(); } } } }; </スクリプト> これで、Vue 子コンポーネントが親コンポーネント メソッドを呼び出す詳細なケースに関するこの記事は終了です。Vue 子コンポーネントが親コンポーネント メソッドを呼び出す関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL データベースの文字化け問題の原因と解決策
>>: Linux Jenkins 構成スレーブノード実装プロセス図
視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...
1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...
例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...
これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...
関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...
1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...
目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...
GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...
タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...
目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...
ユニアプリコード <テンプレート> <表示> <image v-for...
序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...
目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...