vue子组件修改父组件的三种方法

       一直使用$emit触发父组件的事件方法来实现改变父组件的值,导致把其他方法都给忘了。特别来整理下,加深下印象吧。

1. $emit('event', val)

 最常用的一种方法,父组件通过v-on绑定一个事件,在事件中修改自己的值,子组件通过$emit触发该事件

vue子组件修改父组件的三种方法

vue子组件修改父组件的三种方法

在子组件MobileMessage中:

vue子组件修改父组件的三种方法

这种方法有个好处就是可以在父组件的事件里面做一些额外的处理,但是如果单纯的赋值,这个有点繁琐了。

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

父组件通过.sync标识符表明prop的双向绑定,.sync是一个简写,完整写法:v-on:update:title="doc.title = $event":

vue子组件修改父组件的三种方法

子组件:

vue子组件修改父组件的三种方法

相比于第一种方法,少了很多步骤,用起来很方便

3. 自定义事件绑定v-model

父组件:

vue子组件修改父组件的三种方法

子组件:

1. model里面声明变量和事件;

2. props也得声明该变量。

vue子组件修改父组件的三种方法

详见官网https://cn.vuejs.org/v2/guide/components-custom-events.html