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