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

以下もご興味があるかもしれません: