dialog弹窗优雅写法

 <!-- -----弹窗------ -->
    <new-adddialog  :dialog-visible.sync="newAddvisible"></new-adddialog>

data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'childNodes',
        label: 'name',
        isLeaf: 'leaf',
      },
      filterText: '',
      // 弹窗
      tableData: [],
      newAddvisible:false,  //新增弹窗
      loading: false,

method:{
    // 新增
    newAddclick(){
      this.newAddvisible = true
      
    }
}

 子组件

 props: {
    dialogVisible: { type: Boolean, require: true, default: false },
    subTaskInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },

  通过'update:dialogVisible',可以实时更新父组件的newAddvisible的值
 <span slot="footer" class="dialog-footer">
    <el-button @click="()=>{this.$emit('update:dialogVisible', false)}">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>