解决方式一：

• 在data对象中创建一个值，如visible
• 使用watch监听props属性中对应的值 ，如value，
• watch 赋予data副本 来同步组件外对props的修改，始终保持data中的值等于父组件传递过来的值
• 当data中的值变化时，触发父组件的自定义事件

  // 子组件
<template>
  <div class="modal" v-show="visible">
    <p>我是子组件</p>
    <button @click="cancel">子组件的关闭按钮</button>
  </div>
</template>

<script>
export default {
  name: "MyList",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false
    }
  },
  watch: {
    value(val) {
      this.visible = val;
    }
  },
  methods: {
    cancel() {
      this.visible = false;
      this.$emit('modalVisibleChange', false);
    }
  },
};
</script>


//父组件
<template>
  <div>
    <p>我是父组件</p>
    <button v-show="!isShow" @click="isShow=true">父组件的显示按钮</button>
    <MyList :value="isShow" @modalVisibleChange="modalVisibleChange"/>
  </div>
</template>

<script>
import MyList from './MyList'

export default {
  name: "app",
  data() {
    return {
      isShow: false
    };
  },
  components: {
    MyList,
  },
  methods: {
    modalVisibleChange(val) {
      this.isShow = val;
    }
  }
};
</script>

优点：解决了 父子组件之间props 双向绑定的问题；
缺点： 在父级调用 子组件的时候，还需要写一个 modalVisibleChange 的方法，而且子组件还需要写方法控制组件的显示和隐藏，代码过于冗长，且难以理解。

解决方式二：通过.sync

<template>
  <div class="modal" v-show="value">
    <p>我是子组件</p>
    <button @click="cancel">子组件的关闭按钮</button>
  </div>
</template>

<script>
export default {
  name: "MyList",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancel() {
      this.$emit('update:value', false) // $emit触发父组件数据同步修改
    }
  },
};
</script>

// 父组件
<template>
  <div>
    <p>我是父组件</p>
    <button v-show="!isShow" @click="isShow=true">父组件的显示按钮</button>
    <MyList :value.sync="isShow"/>
  </div>
</template>

<script>
import MyList from './List'

export default {
  name: "app",
  data() {
    return {
      isShow: false
    };
  },
  components: {
    MyList,
  },
};
</script>

解决方式三：（推荐）

• 使用 v-model 实现组件props的双向绑定

 // modal组件
<template>
 <div class="modal" v-show="value">
  <div class="close" @click="cancel">X</div>
 </div>
</template>

<script>
export default {
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },
 methods:{
 cancel(){
  this.$emit('input', false);
 }
 },
}
</script>


// 父组件调用modal组件
 <modal v-model="isShow"></modal>
export default {
 name: 'app',
 data () {
 return {
  isShow:true
 }
 }
}
</script>