vue中的.sync修饰符

产生缘由

vue中组件间的传值为单向传递，子组件想要更新父组件的值，需要用emit触发父组件函数，用.sync修饰符简化父组件中监听事件过程。

子组件触发事件

// 'update:msg'事件名和父组件监听名称对应
this.$emit('update:msg','更改了父元素的值！');

简化前的父组件监听

<template>
  <div id="app">
    <HelloWorld
      :msg="msg"
// 当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值
      v-on:update:msg="msg = $event" 
    />
  </div>
</template>

简化后的父组件监听

.sync替代了 v-on:update:msg="msg = $event"

<template>
  <div id="app">
    <HelloWorld
      :msg.sync="msg"
    />
  </div>
</template>