sync修飾符的使用

2021-09-25 16:13:35 字數 940 閱讀 5978

目的:再子元件去改變父元件的值的時候會有明顯的**樣式,方便維護,為什麼要這樣為什麼不用v-molder,因為v-model中已經說明了不要直接去改變v-model中的值,可以去拷貝在改變,在傳值,這個也是v-model和sync修飾符的區別。

再我應用了後我認為就是:再父元件上省去了觸發事件,並且直接把子元件中傳過來的值賦值給v-bind且新增了.sync的那個變數(下面例子直接將子元件傳過來的flase給valuechild)

這裡說一下v-model:少乙個v-bind傳值,和乙個接收事件,事件的作用:把子元件傳過來的值替換掉目前的值,從而達到雙向繫結的效果

案例:乙個簡單父兒元件傳值

父元件

toggle

這裡我將兒元件命名為的是zj.vue

子元件 name:mycomponent

預設初始值是},所以是顯示的

關閉

解析:在父元件中給某乙個prop中的傳值新增.sync修飾符後,那麼在子元件中便可以,直接在自定義事件中的第乙個引數中以update:mypropname的模式觸發事件取而代之,那麼第二個引數遍就直接變成了mypropname的值,去傳給父元件,而父元件都不需要去監聽事件去改變值這個prop傳值,例如上面例子中的父元件中的valuechild直接變成就false,而不用去在監聽乙個事件,在那個事件中去把valuechild直接變成就false,從而達到了再父元件上省去了監聽觸發事件這一步操作而是直接賦值

修飾符 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...