一、Vue有关规则

二、理解.sync修饰符

• 修饰符是对Vue指令的额外描述
• 如.stop，表示阻止事件传播/冒泡
• 通过代码理解.sync，父组件App.vue，子组件Child.vue；当子组件button被点击时，money-100，并同步展示到父组件上，如图

1. 父组件App.vue

<template>
  <div>
    App.vue我现在有{{total}}
    <Child:money="total" v-on:update:money="total=$event" />  //$event获取参数
  </div>
</template>
<script>
import Child from "./Child.vue";
export default{
  data(){
    return{total:10000};
  },
  components:{Child:Child}
};
</script>

2. 子组件Child.vue

<template>
  <div>
    {{money}}
    <button @click="$emit('update:money',money-100)">  //当点击时触发update:money事件，并传参
      <span>花钱</span>
    </button>
  </div>
</template>
<script>
export default{
  props:["money"]  //外部数据props
};
</script>

3. <Child:money="total" v-on:update:money="total=$event" />可通过修饰符.sync简写成<Child:money.sync="total" />
4. 总结

• 当一个子组件改变了一个prop值，这个变化也会同步到父组件中所绑定
• .sync作为一个编译时的语法糖存在，即一个会自动更新父组件属性的v-on监听器