1 、指令

指令即 Directive，從字面意思理解就是我告訴你要做什麼，就是傳送了一個指令，然後由接收指令的人去做就好了。在 vue 中的指令有個統一好認的格式，就是以 v- 開頭的就是指令，如：

<div v-text="x"> </div> //v-text指定標籤文字指令
<div v-on:click="add"> <div> //v-on事件繫結指令

但並不是所有的指令都以 v- 開頭，對於一些簡寫，也是指令，如

<img :src="x"> </img> //v-bind:src 的簡寫
<button @click="add"> </button> //v-on:click 的簡寫

2 、修飾符

修飾符是與指令中的事件處理指令 v-on 息息相關的一個語法糖，所謂語法糖就是很 sweet，簡單好用，在程式設計界就是能幫你做好的都幫你做了，只剩最簡單的事留給你做。

在事件處理程式中，有一些非常常見的需求，例如 event.preventDefault() 阻止預設事件和 eve程式設計客棧nt.stopPropagation()阻止事件冒泡等等。因此 Vue 就把這些事件處理過程中常見的需求幫我們處理好了，在我們需要時告訴 Vue 一聲，它就會自動幫我們阻止預設事件、阻止事件冒泡等。那麼我們告訴 Vue 的途徑就是 Vue 提供給我們的修飾符，修飾符是由點開頭的指令字尾來表示的

以阻止 <a> 標籤的點選預設重新整理頁面事件的 preventDefault 方法示例如下：

普通做法

<a href="" v-on:click=" rel="external nofollow" pe($event)">Vue點選連結</a> //vue中訪問原始的DOM事件，可以用特殊變數 $event 把它傳入方法，在原始 HTML 中是 event

// ... 
methods: {
    pe(e){
        e.preventDefault()
    }
}

使用修飾符

<a v-on:click.prevent>Vue點選連結</a> //prevent修飾符就等同於上述的 e.preventDefault()

由上述的小例可以看出，修飾符是不是個語法糖，幫我們把常用的需求提前寫好了，用的時候說一聲就行。當有事件處理程式時直接在後面繼續寫即可，如下：

<a href="" v-on:click.prevent=" rel="external nofollow" pp">Vue點選連結</a>

// ... 
methods: {
    pp(){
        console.log('不跳轉頁面執行事件')
    }
}

修飾符是有順序地執行的，如上述的 v-on:click.prevent="pp"，意思就是在點選時，先執行修飾符 prevent 的阻止預設事件，然後再執行後面的 pp 事件處理函式。

修飾符幾乎是和事件 event 的相關處理函式一一對應的，根據事件的www.cppcns.com不同，對應不同事件的修飾符，如下所示分為幾大類：

修飾符的來源和含義就是上述所述，至於具體有哪些，在實際用到時可去官網查詢所需，有兩個最最常用的需要記住，即 @click.stop 是阻止事件冒泡，@click.prevent 是阻止預設事件，@keypress.enter 是按鍵為回車事件。

3、 .sync 修飾符

.sync 修飾符相對來說比較特殊，因為其不是事件 event 原有的事件處理相關函式的演變，而是 Vue 自己定義的一個修飾符，如上述的修飾符分類中也將 .sync 分類為自定義事件的修飾符，那麼這個自定義事件到底是什麼事件呢？

這個事件對應的是 eventBus 事件，eventBus 事件是 MVC 中的一個模式，簡單來說就是釋出和訂閱的過程，就是說有兩方，甲www.cppcns.com方負責始終監聽某個事件，乙方負責在需要的時候觸發這個事件，甲方在監聽到事件被觸發時就執行某些操作。甲方就是訂閱，乙方就是釋出，雙方就是釋出和訂閱模式。

那麼在 Vue 中在什麼時候會需要用到這種情況呢？

就是在 Vue 的元件在接受外部資料 props 時，Vue 規定，子元件在通過 props 接受外部資料後只有使用該資料的權利，但沒有修改該屬性的權利。因為，如果子元件修改了外部傳來的資料，這樣一來子元件和使用其的父檔案都可以改來改去，在父元件和子元件都沒有明顯的改動來源，到最後都不知道這個資料是誰改的了，資料就不好控制了。因此 Vue 就規定元件只能有權使用 props 的屬性，不得自己改變，那麼若其想要改變，就必須通知該資料的真正擁有者改變，也就是使用該元件的父檔案。

其使用的通知方式就是 eventBus 釋出和訂閱模式。

不使用 .sync

子元件觸發事件，事件名格式必須是 update:myPropName ，用 $emit 函式觸發

this.$emit('update:title',程式設計客棧 newTitle) //newTitle就是你想要修改props資料修改後的值

父元件可以監聽那個事件並根據需要更新一個本地的資料屬性

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponentwww.cppcns.com>
//在父元件中監聽該事件，該事件觸發後傳遞的值以 $event 接收，$event === newTitle,Ptitle是父元件的資料

或者是定義的接受函式的引數

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//這時接收的值作為函式的引數

使用 .sync

上述的過程在實際需求中很常用，因此 Vue 就將父元件的監聽定義成了一個傳值時的修飾符，為 .sync ，上述程式碼使用 .sync 修飾符後為：

子元件(是一樣的)

this.$emit('update:title',newTitle)

父元件

<myconponent :title.sync="Ptitle"></myconponent> //等同於上面的傳值並監聽

是不是很 sweet 呢？

4 、總結

.sync 的用法規則

1.元件不能修改 props 外部資料

2.this.$emit 可以觸發事件，並傳參

3.$event 可以獲取 $emit 的引數

以上就是詳解Vue的sync修飾符的詳細內容，更多關於Vue的sync修飾符的資料請關注我們其它相關文章！