深入理解vue sync修飾符

2022-08-12 22:30:24 字數 723 閱讀 6829

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

vue的prop是單向下行繫結:父級的prop的更新會向下流動到子元件中,但是反過來不行。可是有些情況,我們需要對prop進行「雙向繫結」。這個時候,就可以用.sync來解決

.sync用法

"

doc.title

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

this.$emit('

update:title

', newvalue)

這樣title的屬性在子元件內部更新,父元件也能感知的到,實現了「雙向繫結」。

.sync應運例項

class="

details

">

'valuechild

' style="

padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;

">

"changevalue

">toggle

如果未觸發事件 this.$emit('update:show', false); 則外部感知不到子元件內部對show的改變,依然認為此事的值是true,導致彈框點選開啟一次之後,後面再不會開啟。

vue sync 修飾符 理解

sync 修飾符 廢話不多說直接上 子元件 son.vue son v if show 傳過來的指是 所以是顯示的 p sonclick son 關閉 button div template export default script 父元件 father details childval styl...

深入理解 sync修飾符

乙個元件上只能定義乙個v model,如果其他prop也要實現雙向繫結的效果該怎麼辦呢?簡單的方法是子元件向父元件傳送乙個事件,父元件監聽該事件,然後更新prop。具體如下 info.vue元件定義了乙個value 屬性,和乙個valuechanged事件 父元件index.vue myvalue ...

Vue sync修飾符使用

vue雙向繫結,但是在父子元件之間遵循單向原則,即子元件不要去改變父元件傳遞過來的值 示例 子元件 child dialog 子彈窗元件 close 關閉 button div template export default methods 父 show 如上在子元件中close方法直接show賦值...