Vueの子コンポーネントが親コンポーネントのメソッドを呼び出す場合の詳細な説明

Vueの子コンポーネントが親コンポーネントのメソッドを呼び出す場合の詳細な説明

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 親コンポーネントでイベントをトリガーして子コンポーネントの値を変更する方法の詳細な例
  • Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す
  • Vue の親コンポーネントのボタンをクリックして子コンポーネントをトリガーするイベントの詳細な説明
  • Vue 親コンポーネントで子コンポーネント関数を呼び出す方法
  • Vue3.0は子コンポーネント内で親コンポーネントの機能をトリガーします

<<:  MySQL データベースの文字化け問題の原因と解決策

>>:  Linux Jenkins 構成スレーブノード実装プロセス図

推薦する

イラスト風ウェブサイトホームページデザイン ウェブサイトデザインの新トレンド

視覚効果が非常に美しく、訪問者に強い印象を残すことがわかります。さらに、重要なポイントが強調され、訴...

Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法

1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...

MySQLの遅いクエリ問題の詳細な分析データ送信

例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...

IEの送信フォームの記録履歴クリックリターン情報を実現するためのCSSスタイルコントロールはまだ残っています

これは主に CSS スタイルのコントロールと META タグです。コードをコピーコードは次のとおりで...

Win7x64でのMySQL 5.7.18解凍版のインストール方法

関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...

MySQLのファジークエリの要約

1. 一般的な使用法: (1)%で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

MySQL の group by と having の詳細な説明

GROUP BY 構文を使用すると、指定されたデータ列の各メンバーに従ってクエリ結果をグループ化して...

3列レイアウトを実現するCSS3フレキシブルボックスフレックス

タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...

Tomcat は親の委任メカニズムを破壊して Web アプリケーションの分離を実現します。

目次Tomcat クラスローダー階層WebAppクラスローダー共有クラスローダーカタリナクラスローダ...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

MySQL で単一のデータベースまたはテーブルを復元する方法と、起こりうる落とし穴

序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...

HTTP 戻りコード一覧(中国語と英語の説明)

httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...

MySQL のデータベース パフォーマンスに影響を与える要因の説明

データベースのパフォーマンスに関する話面接では、「データベースにどのくらい精通していますか?」など、...

バランスの取れたデジタルスクロール効果を実現するJavaScript

目次1. 実施の背景2. 実装のアイデア3. 実施プロセス1. 実施の背景先週、ユーザーがタスクを完...