一直使用$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