有时候我们有种需求，要对一个prop进行“双向绑定”，但我们知道子组件接收到props是不能改变的。 我们可以通过子组件$emit一个事件，并传值。父组件监听这个事件，并重新赋值。

子组件

<template>    <div class="hello">        <h1 @click="$emit('update:msg', 'world')">{{ msg }}</h1>    </div></template><script>export default {    name: 'HelloWorld',    props: {        msg: String    },}</script>

<template>  <div id="app">      <hello-world :msg="msg" v-on:update:msg="msgChange"></hello-world>  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  data() {      return {          msg: 'hello'      }  },  components: {    HelloWorld  },  methods: {      msgChange(newValue) {          this.msg = newValue      }  }}</script>

也可以在模板里简写

<template>  <div id="app">      <hello-world :msg="msg" v-on:update:msg="val => msg = val"></hello-world>  </div></template>

.sync 实际上就是一个语法糖，可以更加简写这种形式

<template>  <div id="app">      <hello-world :msg.sync="msg"></hello-world>  </div></template>

相当于连对子组件传值，和事件监听，值修改，一下做完了。

需要注意子组件$emit的名字要固定：'update:(props的名字)'