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。

参考

• イベントハンドリング — Vue.js
• 「Vue.js」子要素と親要素のクリック イベントを併発しない方法！