vue自定义组件实现sync

// template

<Modal
        :value="modalVisible"
        title="Common Modal dialog box title"
        @on-visible-change="handleVisibleChange">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
</Modal>

// script

  @Prop({type:Boolean, default:false})
  visible:boolean

  get modalVisible(){
    return this.visible
  }

  handleVisibleChange(bool:boolean){
    this.$emit('update:visible',bool)
  }

两处坑：:value="modalVisible"换成v-model="modalVisible"会导致vue warning - "modalVisible" was assigned to but it has no setter."

在 on-cancel回调里直接 modalVisible = false 会导致ts报错 modalVisible readonly，所以改用@on-visible-change事件通过emit更新父组件值从而实现同步