Vue规则

组件不能修改props外部数据
$emit可以触发事件并传参
event可以获取event可以获取emit的参数

实例

子组件：

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

<style>
.child {
  border: 3px solid green;
}
</style>

父组件：

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
//等价于<Child :money.sync="total"/>
  </div>
</template>

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

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

分析

首先，我们让子组件在点击按钮时触发一个事件'update:money'

<button @click="$emit('update:money', money-100)">
//$emit 方法第一个参数为事件名，第二个参数为要传出的值，此处将传出值设为 money - 100

此时，$event便记录了money - 100的值（即money的预期修改值）

然后，在父组件监听此事件，将total改为$event即可：

由于这样的写法很麻烦，而类似的情景又很常见，所以 Vue 提供了.sync修饰符简化写法。在给money传值时加上.sync即可（前提是要将$emit触发的事件名取为'update:money'）：

<Child :money.sync='total'/>
//等价于
<Child :money='total' v-on:update:money = "total = $event"/>

浅析.sync 修饰符

Vue规则

实例

分析