vue el-dialog 如何在子组件使用

1.父组件

<div class="lcyHeadline" @click="xgystz" >
    新供应商拓展
</div>
<table-chart  :xgystzShow="xgystzShow" @close-dialogStatus="CloseDialog"></table-chart>

data(){
    return{
        xgystzShow: false, //默认不显示弹窗
    }
}

方法：
xgystz() {
   this.xgystzShow = true
},
CloseDialog () {
   this.xgystzShow = false
},

2.子组件

<el-dialog
    :visible.sync="vis"
    @close="closeDialog"
    :show-close="true"
    align="center"
    :title="lcyTitle"
    :append-to-body='true'
 ></el-dialog>

props: {
  xgystzShow: Boolean,
},

data(){
    return{
        vis: false,
    }
},
methods:{
    closeDialog () {
      this.$emit('close-dialogStatus', false)
    }

},
watch: {
    xgystzShow (newValue, oldValue) {
      this.vis = newValue
      console.log('newValue',newValue)
    }
}