Vue（4）、イベント修飾子

イベント修飾子

• .stop：イベントのバブリングを防ぐためのJSのevent.stopPropagation（）と同等
• .prevent：デフォルトのイベントを防ぐためのJSのevent.preventDefault（）と同等
• .capture：イベントリスナーを追加するときにイベントキャプチャモードを使用する
• .self：コールバックは、要素自体（子要素ではないなど）でイベントがトリガーされた場合にのみトリガーされます。
• .once：イベントは1回だけトリガーされます

.stopは、イベントがバブリングするのを防ぎます

    <div id="app">
        <!-- 使用 .stop 阻止冒泡 -->
        <div class="inner" @click="divHandler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('这是触发了 inner div 的点击事件');
                },
                btnHandler(){
                    console.log('这是触发了 btn div 的点击事件');
                }
            }
        })
    </script>

.preventはデフォルトの動作を防ぎます

    <div id="app">
        <!-- 使用 .prevent 阻止默认行为 -->        
        <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                linkClick(){
                    console.log('这是触发了 链接 的点击事件');
                }
            }
        })
    </script>

。キャプチャトリガーを達成するためのキャプチャ

        <!-- 使用 .capture 实现捕获触发事件的机制，与冒泡相反 -->  
        <div class="inner" @click.capture="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('这是触发了 inner div 的点击事件');
                },
                btnHandler(){
                    console.log('这是触发了 btn div 的点击事件');
                }
            }
        })
    </script>

.captureは、現在の要素がクリックされたときにのみイベントがトリガーされることを認識します

        <!-- 使用 .self 实现只有点击当前元素的时候，才会触发事件处理函数 -->
        <div class="inner" @click.self="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                divHandler(){
                    console.log('这是触发了 inner div 的点击事件');
                },
                btnHandler(){
                    console.log('这是触发了 btn div 的点击事件');
                }
            }
        })
    </script>

.onceはイベントハンドラーを1回だけトリガーします

        <!-- 使用 .once 只触发一次事件处理函数 -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                divHandler(){
                    console.log('这是触发了 inner div 的点击事件');
                },
                btnHandler(){
                    console.log('这是触发了 btn 按钮 的点击事件');
                },
                linkClick(){
                    console.log('这是触发了 链接 的点击事件');
                }
            }
        })
    </script>

注意：.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为