vue中的 sync修飾符用法及原理詳解

2021-10-03 23:23:55 字數 480 閱讀 2172

//父元件給子元件傳入乙個函式

//se6的寫法

age = res"/>

//子元件通過呼叫這個函式來實現修改父元件的狀態。

mounted ()

//父元件將age傳給子元件並使用.sync修飾符。

//子元件觸發事件

mounted ()

這裡注意我們的事件名稱被換成了update:age

update:是vue為我們約定好的名稱部分

age是我們要修改的狀態的名稱,是我們手動配置的,與傳入的狀態名字對應起來,這樣就完成了,是不是感覺簡單了很多。

注意事項:

這裡我們必須在事件執行名稱前加上update:的字首才能正確觸發事件。

修飾符 sync的用法

單個props資料繫結用法 物件型props資料繫結用法 v if show 我是子元件div click hidden 子元件的取反按鈕button div const son show.sync control son click change 父元件的取反按鈕button div const ...

sync修飾符的用法

首先我們需要知道 子元件如何向父元件傳值。子頁面 optitle.vue var data 10 第乙個引數對應父頁面自定義的事件,第二個值代表要更新的值 this emit update data 父頁面 引入元件 import toptitle from components 在自定義標籤上自定...

關於vue修飾符 sync

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