vue子組件修改父組件的三種方法

       一直使用$emit觸發父組件的事件方法來實現改變父組件的值,導致把其他方法都給忘了。特別來整理下,加深下印象吧。

1. $emit('event', val)

 最常用的一種方法,父組件通過v-on綁定一個事件,在事件中修改自己的值,子組件通過$emit觸發該事件

在子組件MobileMessage中:

這種方法有個好處就是可以在父組件的事件裏面做一些額外的處理,但是如果單純的賦值,這個有點繁瑣了。

2. $emit('update:modelName', data)

父組件通過.sync標識符表明prop的雙向綁定,.sync是一個簡寫,完整寫法:v-on:update:title="doc.title = $event":

子組件:

相比於第一種方法,少了很多步驟,用起來很方便

3. 自定義事件綁定v-model

父組件:

子組件:

1. model裏面聲明變量和事件;

2. props也得聲明該變量。

詳見官網https://cn.vuejs.org/v2/guide/components-custom-events.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章