一、語法

xxx代表修飾符

@click.xxx = 'fn'

二、修飾符匯總

• stop ：阻止事件冒泡；
• once ： 事件只可被執行一次；
• native ：保證自定義組件上的事件可以被執行；
• prevent ： 阻止默認事件的發生；
• keyCode : 指定鍵位觸發事件；
• self ：只有綁定事件本身被執行某個操作時，事件才會被觸發；
• passive : 不去阻止默認事件發生；
• capture ： 事件捕獲；
• sync ：子組件更新父組件的傳遞值；
• left /middle /right : 指定鼠標鍵位觸發事件；

三、用法

3.1、修飾符 —— .stop

阻止事件冒泡

　　<view>
            <view @click='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click.stop='childrenClick'>點擊</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

在不添加.stop修飾符的情況下點擊button按鈕時先后觸發事件打印出2 1，即事件冒泡給了父級，父級事件被一同觸發。添加.stop修飾符后可避免此情況發生。

3.2、 修飾符 —— .once

顧名思義，事件只可被執行一次。

<view>
            <view @click.self='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click.once='childrenClick'>點擊</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

點擊加了.once修飾符的button按鈕，事件打印只執行一次，此后`多次點擊 事件不生效。

3.3、 修飾符 —— .native

保證自定義組件上的事件可以被執行

<view class="padding-tb-lgx bg-gradual-blue">
　　<ybh-tags @click.native='childrenClick' :config='configTags'></ybh-tags>
</view>

methods: {
　　childrenClick(){
　　　　console.log(2);
　　}
},

一般在組件定義事件是無法被直接執行的，大多是通過組件內部的emit廣播出處理后的數據，父級通過組件中emit廣播的參數名寫成方法形式接收，但是通過給事件添加.native后可以直接生效該事件。

3.4、修飾符 —— .prevent

阻止默認事件的發生，比如a標簽的跳轉、button的提交等。

<a href="#" @click.prevent="clickEvent(1)">點我</a>

methods: {
        clickEvent(num) {
            不加 prevent 點擊a標簽 先跳轉然后輸出 1
            加了 prevent 點擊a標簽 不會跳轉只會輸出 1
            console.log(num)
        }
    }

3.5、修飾符 —— .keyCode

指定鍵盤鍵位觸發對應事件，一般配合事件@keyup使用，如指定按ctrl事件觸發事件 @keyup.ctrl ;

<input type="number" @keyup.ctrl="children">

也可以有多種搭配，需自行嘗試。

Vue提供的keyCode：

//普通鍵
.enter 
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right
//系統修飾鍵
.ctrl
.alt
.meta
.shift

如果如果想直接調用 @keyup.f2 = "add" ,需要自定義全局按鍵

解決方案如下：鍵盤對應的鍵碼鏈接 (https://blog.csdn.net/weixin_42218847/article/details/81411291)

//自定義全局按鍵修飾符
Vue.config.keyCodes.F2 = 113

<!-- 自定義按鍵修飾  按  f2 添加 -->
<input type="text" name="" id="" value="" class="form-control" v-model="name" @keyup.113="add"/> 

3.6、修飾符 —— .self

只有綁定事件本身被執行某個操作時，事件才會被觸發。有點繞，看示例：

 <view>
            <view @click.self='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click='childrenClick'>點擊</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

如果不在父級標簽的點擊事件上添加.self修飾符，點擊button按鈕時，會先后觸發事件打印出 2 1，形成了事件冒泡，此時對父級事件添加.self后，由于觸發的對象并不是父級標簽，所以父級標簽上的事件不會被觸發，點擊button后只會打印出 2。

3.7、修飾符 ——.passive

不在阻止默認事件的發生；提問：本來就默認執行了，還要加這玩意干嘛嘞？？？

每個事件執行時，系統都會看一看這個執行的事件有沒有被什么 .prevent(阻止默認) 的家伙阻止掉，沒有最好，有那就沒辦法，老老實實聽它的。正常情況事件執行次數少或連續執行時間不會很短時是沒什么大問題，但是如果是屏幕滾動事件，需要在短時間內連續觸發很多次時，每次執行都會問一下這一次有沒有被阻止啊啥的，嚴重影響了性能，就可能會照成滑動卡頓、不流暢的現象。

怎么辦嘞？這時候就在事件上加上.passive，直接跟這個事件臉上貼上“ 我沒有阻止的傾向 ”，不用再問我有沒有被阻止啦。

<div @scroll.passive="onScroll">...</div>

3.8、修飾符 ——.capture

用于事件捕獲，與冒泡相反

　　　　　<view>
            <view @click.capture='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click='childrenClick'>點擊</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

在不加.capture修飾時，點擊button會前后觸發事件冒泡打印出 2 1，而添加了.capture修飾后 事件打印變為 1 2。

3.9、修飾符 ——.sync

父組件傳遞給子組件值后，若子組件需要更新父組件傳遞的這個值時在父組件傳遞值的屬性上使用此修飾符。（vue組件之間傳值時單向數據流，一般不支持子組件直接更改父組件值）

//父組件 ：
<ybh-tags :isShow.sync='show'></ybh-tags>
data(){
　　return {
　　　　show : true,
　　}
}
//子組件：
this.$emit('update:isShow',false);

以上代碼實現內容為：子組件在父組件傳遞的show為true時顯示，子組件關閉（子組件將父組件傳遞的show值改為false）后子組件隱藏。但是由于控制子組件顯隱的show值是父組件傳遞過來的，在子組件中直接更改show值無法改變父級中的show值，所以導致了父組件在打開一次子組件后，子組件關閉將無法在此顯示子組件內容。因為父級在第一次將show值改為true之后，并沒有因為子組件將show值改為false而變成false，導致了父組件的show值一直保持在了true的狀態。

3.10、 left /middle /right

指定鼠標鍵位觸發對應事件

　<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">點我</button>

　　methods: {
        點擊中鍵輸出1
        點擊左鍵輸出2
        點擊右鍵輸出3
        clickEvent(num) {
            console.log(num)
        }
    }