withModifiers() イベント修飾子のラップ
最終更新：2026-10-22
withModifiers() イベント修飾子のラップ
withModifiers() はレンダー関数内で、イベントハンドラーに修飾子の挙動（stop、prevent、once など）を付与します。
| グループ | レンダー関数と SSR |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
h("button", { onClick: withModifiers(fn, ["prevent", "stop"]) }, "送信")⚙️ 引数
| handler, modifiers | イベントハンドラー + 修飾子名の配列 |
|---|
戻り値：ラップされたイベントハンドラー
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Inner clicks stop at the inner handler; outer clicks log the outer one.💡 ポイント
ℹ️ 補足 テンプレートの .stop/.prevent はコンパイル後にこれを呼び出します。挙動は完全に同じです。
💡 ヒント 手書きのレンダー関数や高階コンポーネントで修飾子が必要なときに使います。
⚠️ 注意 修飾子名は短い名前を使います：'stop'、'prevent'、'self'、'once'。キー修飾子は 'enter' などと書きます。
🏷️ 関連レンダー関数と SSR
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q テンプレートでも使う必要がありますか？
A 不要です。テンプレートには @click.stop のような糖衣構文があります。
Q 複数の修飾子を重ねられますか？
A できます。['prevent', 'stop'] のように指定すると順に適用されます。
Q 手書きの e.stopPropagation() との違いは？
A 効果は同じです。withModifiers の方が短く、テンプレートの挙動とも統一されます。
