【 vue 】$emit('update:foo')子组件同步更

.sync 修饰符，只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。

作者：littleTank
链接：https://www.jianshu.com/p/6b062af8cf01

示例：

<comp :foo.sync="bar"></comp>

扩展成：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

具体示例demo

<template>
  <div class="details">
      <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
      <button @click="changeValue">toggle</button>
  </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
    template: `<div v-if="show">
                  <p>默认初始值是{{show}}，所以是显示的</p>
                  <button @click.stop="closeDiv">关闭</button>
               </div>`,
    props:['show'],
    methods: {
      closeDiv() {
        this.$emit('update:show', false); //触发 input 事件，并传入新值
      }
    }
})
export default{
  data(){
      return{
          valueChild:true,
      }
  },
  methods:{
      changeValue(){
          this.valueChild = !this.valueChild
      }
  }
}
</script>