element ui Drawer封装

<template>
  <div class="father">
    <h1>父组件</h1>
    <input type="text" v-model="num" /><br /><br />
    <button @click="submit">确定弹窗</button>
    <Dialog :num="num" :isshow.sync="isshow"></Dialog>
  </div>
</template>

<script>
import Dialog from './dialog'
export default {
  components: {
    Dialog: Dialog
  },
  data () {
    return {
      num: '',
      isshow: false
    }
  },
  methods: {
    // 点击确定显示弹窗
    submit () {
      this.isshow = true
    }
  }
}
</script>

dialog子组件

<template>
  <div class="dialog">
    <el-drawer
      title="确认出售"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <span>我来啦!</span>
      <div>{{ num }}</div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    // 控制弹窗显示
    isshow: {
      type: Boolean,
      default: false
    },
    num: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      drawer: false,
      direction: 'btt'
    }
  },
  watch: {
    isshow (val) {
      this.drawer = val
    }
  },
  methods: {
    // 关闭弹窗
    handleClose (done) {
      done()
      this.$emit('update:isshow', false)
    }
  }
}
</script>