Vue中$emit 事件和.sync修飾符

2021-11-28由小小那坨發表于美食

1、本章知識點

事件命名才用 “-” 分割。（不採用駝峰，因為html是大小寫不敏感）

。sync 修飾符的使用

2、$emit 作用與語法

通常用於子元件呼叫父元件方法，實現子元件主動與父元件進行通訊。

<！——-html——>

//這裡註冊了一個全域性元件Vue。component（‘my-component’，{ template：`

`， methods：{ clickMe（）{ this。$emit（‘my-fun’，123） } } }） var vm = new Vue（{ el：‘#app’， methods：{ parentFun（value）{ alert（value）； } } }）

這時點選子元件的按鈕時，彈出了123。這裡的

@my-fun=‘parentFunc’

就是建立了一個呼叫父元件parentFun方法的事件my-fun。然後在子元件透過

this。$emit（‘my-fun’，123）

就可以觸發事件。

3、。sync修飾符的使用

作用：用於實現父子元件資料的雙向繫結（語法糖）

。sync

實現資料的雙向繫結

原理：透過

。sync

繫結的父子元件的值。實際上上Vue自動為子元件建立一個事件，用來改變父元件值，而事件名預設為：

update: prop值

。以下面案例進行說明：

透過在子元件新增：

：child-value。sync =‘value’

。 Vue看到

。sync

關鍵字會自動為子元件建立一個叫做

update：childValue

或者

update：child-value

的事件。（這兩種事件名都可以成功呼叫）這個事件可以接受引數，並自動將引數賦給父元件的

value

。可以理解為事件是引用了這樣的方法

" (value) => this.value = value "

可以看到在後面子元件的input的觸發方法我成功呼叫事件，將子元件的輸入傳遞給父元件。

<！—— html程式碼 ——>

修改父元件的值：
父元件的值：{{value}}

Vue。component（‘myComponent’，{ props：［‘childValue’］， template：`

修改子元件的值：
子元件的值：{{ myData }}

`， data（）{ return{ myData： this。childValue } }， methods：{ inputFun（e）{ const value = e。target。value； this。myData = value； this。$emit（‘update：childValue’，value） } }， watch：{ ‘childValue’：function（val）{ this。myData = val； this。$refs。inputID。value = this。myData； } } }） var vm = new Vue（{ el：‘#app’， data：{ value：‘’， }， }）

最終效果圖：

改變父元件的值或是改變子元件的值，父子元件都會跟著變化。