一、$emit

子组件通过props可以引用父组件的数据，那么当子组件想要修改这个数据时，则可以通过$emit在子组件上修改父组件的数据。

$emit 共接收两个参数：

{string} eventName 触发当前实例上的事件。
[...args] 附加参数都会传给监听器回调。

示例

情景：父给子钱，子要花钱，子可以看到具体的钱是多少，但是子要花钱不能直接花，需要通过触发一个事件，父监听这个事件，父通过$event接受子传递过来的参数

子组件可以通过调用$emit传入事件名称来触发一个事件：

 //child.vue
<template>
    <div class="child">
      爸爸有{{money}}
       <button @click="$emit('update:money', money - 10)">我要花钱</button>
    </div>
</template>
  
<script>
  export default {
    props: ["money"]
  }
</script>
  
<style>
      .child{
          border:1px solid green;
      }
      
</style>
复制代码
复制代码

父组件的子组件器上使用v-on监听这个自定义事件，通过$event接受子组件传递过来的参数

//parent.vue
<template>
  <div class="parent">
    <div>
      爸爸现在有{{ total }}元钱
      <hr/>
      <Child :money="total" v-on:update:money="total = $event"/>
        // :money="total"的意思是 money 这个外部值传入的是 total 这个变量，传变量需要前面加：
    </div>
  </div>
</template>

<script>
import Child from "./child.vue"
export default {
  components: { Child },
  data() {
    return {
      total: 10000
    }
  }
}
</script>

<style>
    .parent{
        border:1px solid red;
    }
</style>
复制代码
复制代码

二、.sync

.sync简化了上述代码，直接在父组件上使用

//parent.vue
<template>
  <div class="parent">
    <div>
      爸爸现在有{{ total }}元钱
      <hr/>
      <Child :money.sync="total"/>
    </div>
  </div>
</template>
复制代码
复制代码

:money.sync="total" 等价于:money="total" v-on:update:money="total = $event"