背景

vue的子组件不能直接使用父组件的数据，所以我们需要用到prop来让子组件获取父组件的数据。

那么，子组件在获取父组件的数据后能不能直接修改父组件的数据呢？

实现方法

通过api：$emit，可以实现在子组件上面修改父组件上面的数据。

• 在子组件上触发一个自定义事件，并传递一个自定义事件 写法：

@click="$emit('something')"

• 在父组件的子组件器上使用v-on监听这个自定义事件

<child :num='num' v-on:something='num += 1' /> 
//这个num是父组件上面的数据 

• 通过以上方式可以让子组件修改父组件上的数据。

• 修改后让父组件通过$event接收

示例代码：busy-kowalevski-7g7oz0 - CodeSandbox

利用.sync简化代码

上面截图中的的代码一共进行了两个步骤：

1、父组件(app.vue)监听子组件(child.vue)上的自定义事件"update:money"并让值total等于传递过来的$event

v-on:update:money="total = $event"

2、子组件内的代码点击后触发自定义事件"update:money"并传递一个参数，参数为money-100

@click="$emit('update:money', money - 100)

这种模式似乎很固定。

那么，我们可以不可以简化代码呢？

vue很贴心地为我们做了相关工作，那就是.sync修饰符。

利用了.sync修饰符我们就可以将上面的代码简化为。

1、父组件 :money.sync="total"

2、子组件 @click="$emit('update:money', money-100)"

示例代码:small-leftpad-zzvpp - CodeSandbox

注意: 使用.sync后写法需要注意的是：eventName只能采用update:传递过来的prop属性的方式才行。