// 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更新父组件值从而实现同步