vue元件中的 sync修飾符使用

2021-10-16 12:19:16 字數 1045 閱讀 2359

.sync是vue中用於實現簡單的「雙向繫結」的語法糖,在平時的開發中是經常使用的。

在vue的元件通訊props中,一般情況下,資料都是單向的,子元件不會更改父元件的值,那麼vue提供.sync作為雙向傳遞的關鍵字,實現了父元件的變動會傳遞給子元件,而子元件的show改變時,通過事件機制,修改父元件的show。完成了子元件show和父元件show的雙向對映。

// 父級中呼叫子元件

"show"

>

<

/son>

//當子元件需要更新 show 的值時,它需要顯式地觸發乙個更新事件:

this

.$emit

('update:show'

,false

)

示例

//父元件

="father"

>

父元件<

/div>

"show"

>

<

/son>

"changevalue"

>toggle<

/button>

<

/div>

<

/template>

import son from

"../components/address"

;export

default;}

, methods:,}

,mounted()

, components:,}

;<

/script>

//子元件

="son" v-show=

"show"

>

我是子元件<

/div>

"close"

>關閉<

/button>

<

/div>

<

/template>

export

default,}

,};<

/script>

vue中v model與 sync修飾符的使用差異

使用方式 子元件 示例 父元件 message children template import children from children.vue export default data watch script 子元件 h1 template export default props moun...

vue元件中的 sync修飾符實現父子元件雙向通訊

我們知道,在vue的元件通訊props中,一般情況下,資料都是單向的,即父元件資料的更改會下傳到子元件 用了.once除外 子元件對資料無法做出更改 當傳遞的資料是引用資料型別時,可以更改父元件資料,比如,陣列的破壞性方法,push等 在vue1.x時,提供.sync作為雙向傳遞的關鍵字,但是2.0...

關於vue修飾符 sync

vue是單項資料流,所以要對他進行雙向資料繫結的時候需要用到.sync修飾符,最常用的是visible.sync 在子元件裡寫 this.emit update visible visible 使用update my prop name 的模式觸發事件 父元件裡 isvisible update v...