Element 父子组件调用弹窗el-dialog或抽屉el-drawer

父组件：

<template>
  <comfirm-charge :is-active="drawerVisible" :userid="userId" :sid="sid" :sname="sname" @Visible="showDrawerChange" @comfirm="resetForm" />
</template>
<script>
import ComfirmCharge from './confirm-charge-drawer.vue'
export default {
  components: {
    ComfirmCharge
  },
  data() {
    return {
      drawerVisible: false,
      userId: '', // 用户id
      sid: '',
      sname: ''
    }
  },
  methods: {
    showDrawerChange(data) {
      if (data == 'false') {
        this.drawerVisible = false
      } else {
        this.drawerVisible = true
      }
    },
    resetForm(fromname) {
      this.queryParams.pageIndex = 1
      this.getTableData()
    }
  }
}
</script>

 

　子组件：

<template>
  <el-drawer title="信息" :visible.sync="drawerVisible" size="60%" :wrapper-closable="false" @close="closeDrawer">
    <div>测试测试</div>
  </el-drawer>
</template>
<script>
export default {
  name: 'ComfirmCharge',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    userid: {
      type: String,
      default: ''
    },
    sid: { 
      type: String,
      default: ''
    },
    sname: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      drawerVisible: false,
      searchFeeForm: {
        user_Id: '',
        sid: '',
        sname: ''
      }
    }
  },
  watch: {
    // 监听 改变
    isActive: {
      handler: function(val, oldVal) {
        this.drawerVisible = val
      },
      immediate: true
    },
    userid: {
      handler: function(newValue, oldVal) {
        this.searchFeeForm.user_Id = newValue
        if (newValue) {
          this.getUserById()
        }
      },
      immediate: true
    },
    sid: {
      handler: function(newValue, oldVal) {
        this.searchFeeForm.sid = newValue
      },
      immediate: true
    },
    sname: {
      handler: function(newValue, oldVal) {
        this.searchFeeForm.sname = newValue
      },
      immediate: true
    }
  },
  methods: {
    // 获取用户信息
    getUserById() { },
    // 关闭抽屉,清除数据
    closeDrawer() {
      this.drawerVisible = false
      this.$emit('Visible', 'false')
    }
  }
}
</script>