vue元件中的 sync修飾符使用

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