Vue.jsで子要素にイベントを伝搬させない

モーダルを自前実装していて、「暗転したレイヤーはクリックされるとモーダルを閉じて欲しいが、モーダル自体をクリックした際は閉じないで欲しい」というモーダルとしては自然な挙動を実装するために、子要素にイベントを伝搬させたくないという状況になりました。 実装としては、親要素のクリックイベントに.selfを付けるだけで解決しました。
<template>
    <div class="modal" @click.self="modalHidden"><!-- この@clickに.selfを付ける -->
        <div class="modal_dialog" role="document">
        <!-- モーダルコンテンツ内容 -->
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        modalHidden() {
            this.$emit('switchModal')
        }
    }
}
</script>
これでOK。

参考

この記事を書いた人

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。