Vue sync修飾符使用

2021-10-07 16:24:02 字數 1091 閱讀 2504

vue雙向繫結,但是在父子元件之間遵循單向原則,即子元件不要去改變父元件傳遞過來的值

示例:

子元件 child-dialog

子彈窗元件

"close"

>關閉<

/button>

<

/div>

<

/template>

export

default},

methods:

}父:

"show"

/>

如上在子元件中close方法直接show賦值false,那麼就是改變父元件的值。會給出警告:

解決方式:

一: $emit 、v-on

data中例項化個變數接收prop。然後借助子元件中$emit傳送,父元件中v-on這種方式就不做介紹(不推薦使用,繁瑣)

二、使用sync去改變父元件變數引數:

官網傳送門

子元件

子彈窗元件

"close"

>關閉<

/button>

<

/div>

<

/template>

export

default},

methods:

}父:

"show"

/>

總結:

子元件直接使用

$emit

("update:傳遞過來的引數字段"

,變更後的值)

父元件

傳遞的引數加上.sync修飾符

vue sync 修飾符 理解

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

深入理解vue sync修飾符

sync是vue中用於實現簡單的 雙向繫結 的語法糖,在平時的開發中是非常使用的。vue的prop是單向下行繫結 父級的prop的更新會向下流動到子元件中,但是反過來不行。可是有些情況,我們需要對prop進行 雙向繫結 這個時候,就可以用.sync來解決 sync用法 doc.title 當子元件需...

修飾符 許可權修飾符

四種形式許可權修飾符的訪問情況 publicprotected不寫private 同乙個類中 四種都可以 同一包中的不同類 除了private剩下都可以 不同包下的子類 public protected 可以 不同包下的不同類 只有public可以 許可權修飾符 public protected 預...