詳解vue修飾符 sync ，結合案例

vue 修飾符sync的功能是：當乙個子元件改變了乙個 prop 的值時，這個變化也會同步到父元件中所繫結

.sync 修飾符，只是作為乙個編譯時的語法糖存在。它會被擴充套件為乙個自動更新父元件屬性的 v-on ***。

// 你的**

"bar"
>
<
/comp>
// 編輯後的**
"bar" @update:foo=
"val => bar = val"
>
<
/comp>

this

.$emit
('update:***'
,***
)// update：是被固定的也就是vue為我們約定好的名稱部分

// 父元件原始碼

=>
"parentobj"
/>
<
/div>
<
/template>
export
default
,data()
}}, watch:
,// immediate: true,
deep:
true}}
}<
/script>

// 子元件原始碼

"childobj.value" type=
"text"
class
="input-cls"
>
<
/template>
export
default}}
},data()
}}, watch:
,// immediate: true,
deep:
true},
parentobj:
, immediate:
true
, deep:
true}}
}<
/script>
"scss" scoped>
.input-cls 
<
/style>

Vue 指令及修飾符 sync 詳解

目錄 1 指令及其語法 2 指令的修飾符 3 都有哪些指令修飾符 4 深入理解 sync 指令修飾符 vue 模板語法中的 v text v html v pre 都是指令，它起到一種命令或指示的效果，語法 如下 v 指令名 引數 值如 v on click add 如果值裡沒有特殊字元，則可以不加...

關於vue修飾符 sync

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

深入解讀Vue修飾符sync

在一些情況下，我們可能會需要對乙個 prop 父子元件傳遞資料的屬性 進行 雙向繫結 在vue 1.x 中的 sync 修飾符所提供的功能。當乙個子元件改變了乙個帶 sync 的prop的值時，這個變化也會同步到父元件中所繫結的值。這很方便，但也會導致問題，因為它破壞了單向資料流。資料自上而下流，事...