.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...