1. 程式人生 > >vue子元件修改父元件的三種方法

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也得宣告該變數。