指令即 Directive，從字面意思理解就是我告訴你要做什么，就是發(fā)送了一個(gè)指令，然后由接收指令的人去做就好了。在 Vue 中的指令有個(gè)統(tǒng)一好認(rèn)的格式，就是以 v- 開(kāi)頭的就是指令，如：

<div v-text='x'> </div> //v-text指定標(biāo)簽文本指令<div v-on:click='add'> <div> //v-on事件綁定指令

但并不是所有的指令都以 v- 開(kāi)頭，對(duì)于一些簡(jiǎn)寫，也是指令，如

<img :src='http://www.aoyou183.cn/bcjs/x'> </img> //v-bind:src 的簡(jiǎn)寫<button @click='add'> </button> //v-on:click 的簡(jiǎn)寫2 、修飾符

修飾符是與指令中的事件處理指令 v-on 息息相關(guān)的一個(gè)語(yǔ)法糖，所謂語(yǔ)法糖就是很 sweet，簡(jiǎn)單好用，在編程界就是能幫你做好的都幫你做了，只剩最簡(jiǎn)單的事留給你做。

在事件處理程序中，有一些非常常見(jiàn)的需求，例如 event.preventDefault() 阻止默認(rèn)事件和 event.stopPropagation()阻止事件冒泡等等。因此 Vue 就把這些事件處理過(guò)程中常見(jiàn)的需求幫我們處理好了，在我們需要時(shí)告訴 Vue 一聲，它就會(huì)自動(dòng)幫我們阻止默認(rèn)事件、阻止事件冒泡等。那么我們告訴 Vue 的途徑就是 Vue 提供給我們的修飾符，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的

以阻止 <a> 標(biāo)簽的點(diǎn)擊默認(rèn)刷新頁(yè)面事件的 preventDefault 方法示例如下：

普通做法

<a href='http://www.aoyou183.cn/bcjs/10178.html' v-on:click=' rel='external nofollow' pe($event)'>Vue點(diǎn)擊鏈接</a> //vue中訪問(wèn)原始的DOM事件，可以用特殊變量 $event 把它傳入方法，在原始 HTML 中是 event

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

使用修飾符

<a v-on:click.prevent>Vue點(diǎn)擊鏈接</a> //prevent修飾符就等同于上述的 e.preventDefault()

由上述的小例可以看出，修飾符是不是個(gè)語(yǔ)法糖，幫我們把常用的需求提前寫好了，用的時(shí)候說(shuō)一聲就行。當(dāng)有事件處理程序時(shí)直接在后面繼續(xù)寫即可，如下：

<a href='http://www.aoyou183.cn/bcjs/10178.html' v-on:click.prevent=' rel='external nofollow' pp'>Vue點(diǎn)擊鏈接</a>

// ... methods: { pp(){console.log(’不跳轉(zhuǎn)頁(yè)面執(zhí)行事件’) }}

修飾符是有順序地執(zhí)行的，如上述的 v-on:click.prevent='pp'，意思就是在點(diǎn)擊時(shí)，先執(zhí)行修飾符 prevent 的阻止默認(rèn)事件，然后再執(zhí)行后面的 pp 事件處理函數(shù)。

修飾符幾乎是和事件 event 的相關(guān)處理函數(shù)一一對(duì)應(yīng)的，根據(jù)事件的不同，對(duì)應(yīng)不同事件的修飾符，如下所示分為幾大類：

修飾符的來(lái)源和含義就是上述所述，至于具體有哪些，在實(shí)際用到時(shí)可去官網(wǎng)查找所需，有兩個(gè)最最常用的需要記住，即 @click.stop 是阻止事件冒泡，@click.prevent 是阻止默認(rèn)事件，@keypress.enter 是按鍵為回車事件。

.sync 修飾符相對(duì)來(lái)說(shuō)比較特殊，因?yàn)槠洳皇鞘录?event 原有的事件處理相關(guān)函數(shù)的演變，而是 Vue 自己定義的一個(gè)修飾符，如上述的修飾符分類中也將 .sync 分類為自定義事件的修飾符，那么這個(gè)自定義事件到底是什么事件呢？

這個(gè)事件對(duì)應(yīng)的是 eventBus 事件，eventBus 事件是 MVC 中的一個(gè)模式，簡(jiǎn)單來(lái)說(shuō)就是發(fā)布和訂閱的過(guò)程，就是說(shuō)有兩方，甲方負(fù)責(zé)始終監(jiān)聽(tīng)某個(gè)事件，乙方負(fù)責(zé)在需要的時(shí)候觸發(fā)這個(gè)事件，甲方在監(jiān)聽(tīng)到事件被觸發(fā)時(shí)就執(zhí)行某些操作。甲方就是訂閱，乙方就是發(fā)布，雙方就是發(fā)布和訂閱模式。

那么在 Vue 中在什么時(shí)候會(huì)需要用到這種情況呢？

就是在 Vue 的組件在接受外部數(shù)據(jù) props 時(shí)，Vue 規(guī)定，子組件在通過(guò) props 接受外部數(shù)據(jù)后只有使用該數(shù)據(jù)的權(quán)利，但沒(méi)有修改該屬性的權(quán)利。因?yàn)椋绻咏M件修改了外部傳來(lái)的數(shù)據(jù)，這樣一來(lái)子組件和使用其的父文件都可以改來(lái)改去，在父組件和子組件都沒(méi)有明顯的改動(dòng)來(lái)源，到最后都不知道這個(gè)數(shù)據(jù)是誰(shuí)改的了，數(shù)據(jù)就不好控制了。因此 Vue 就規(guī)定組件只能有權(quán)使用 props 的屬性，不得自己改變，那么若其想要改變，就必須通知該數(shù)據(jù)的真正擁有者改變，也就是使用該組件的父文件。

其使用的通知方式就是 eventBus 發(fā)布和訂閱模式。

不使用 .sync

子組件觸發(fā)事件，事件名格式必須是 update:myPropName ，用 $emit 函數(shù)觸發(fā)

this.$emit(’update:title’, newTitle) //newTitle就是你想要修改props數(shù)據(jù)修改后的值

父組件可以監(jiān)聽(tīng)那個(gè)事件并根據(jù)需要更新一個(gè)本地的數(shù)據(jù)屬性

<myconponent :title='Ptitle' @update:title='Ptitle = $event' ></myconponent>//在父組件中監(jiān)聽(tīng)該事件，該事件觸發(fā)后傳遞的值以 $event 接收，$event === newTitle ,Ptitle是父組件的數(shù)據(jù)

或者是定義的接受函數(shù)的參數(shù)

<myconponent :title='Ptitle' @update:title='val => Ptitle = val' ></myconponent>//這時(shí)接收的值作為函數(shù)的參數(shù)

使用 .sync

上述的過(guò)程在實(shí)際需求中很常用，因此 Vue 就將父組件的監(jiān)聽(tīng)定義成了一個(gè)傳值時(shí)的修飾符，為 .sync ，上述代碼使用 .sync 修飾符后為：

子組件(是一樣的)

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

父組件

<myconponent :title.sync='Ptitle'></myconponent> //等同于上面的傳值并監(jiān)聽(tīng)

是不是很 sweet 呢？

.sync 的用法規(guī)則

1.組件不能修改 props 外部數(shù)據(jù)

2.this.$emit 可以觸發(fā)事件，并傳參

3.$event 可以獲取 $emit 的參數(shù)

以上就是詳解Vue的sync修飾符的詳細(xì)內(nèi)容，更多關(guān)于Vue的sync修飾符的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！