Vue父子组件双向数据绑定 sync方法子组件通过$emit传的值，会更新父组件的show值。子组件$emit方法名固定

最简单的方式来介绍用法 一看就能懂

sync是一个语法糖，如以下两段代码实际相同

<son :isShow.sync="show" ></son>

<son :isShow="show" @update:isShow="value =>show=value" </son>

:isShow.sync="show" （的意思是）

父组件给子组件传了一个show值，
子组件通过$emit传的值，会更新父组件的show值。子组件$emit方法名固定加update:

如this.$emit('update:isShow',false)

完整案例展示
<!--父组件--> 
 <template> 
 <div>

 <button @click="show = true">点击显示</button> 
 <!--引入子组件--> <son :isShow.sync="show" v-if="show"></son> 

 </div>
 </template>

 <script> 
 export default { 
  data() {      
    return { show: false };   
   } }; 
</script>

<!--子组件-->
<template>

  <div>子组件<button @click="upData">我是子组件的按钮点我隐身</button></div>

</template>
<script>
  export default {
    methods:{
      upData(){
        //根据业务类型，可以通过点击或watch监听的子组件数据传回父组件
        this.$emit('update:isShow',false)
      }
    }
  };
</script>