Vue.js可复用Dialog组件：实现按钮绑定不同操作

核心思路 #

让父组件在触发弹窗时，把对应的回调函数传递给Dialog子组件，子组件的Submit按钮点击时直接调用这个传入的函数，同时处理弹窗关闭逻辑。

第一步：改造DialogReusable.vue子组件 #

给子组件添加props接收弹窗状态和回调函数，通过$emit同步弹窗状态到父组件：

<template>
  <v-dialog
    v-model="localDialog"
    persistent
    max-width="300"
  >
    <v-card>
      <v-card-title
        class="text-h5"
        style="word-break: break-word"
      >
        Title
      </v-card-title>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="green darken-1"
          text
          @click="closeDialog"
        >
          Cancel Button
        </v-btn>
        <v-btn
          class="primary"
          @click="handleSubmit"
        >
          Submit
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    // 接收父组件的弹窗状态（用于v-model绑定）
    value: {
      type: Boolean,
      default: false
    },
    // 接收父组件传递的submit回调函数
    onSubmit: {
      type: Function,
      required: true
    }
  },
  computed: {
    // 用计算属性处理v-model双向绑定
    localDialog: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    closeDialog() {
      this.localDialog = false
    },
    handleSubmit() {
      // 先执行父组件传入的回调
      this.onSubmit()
      // 执行完后关闭弹窗
      this.closeDialog()
    }
  }
}
</script>

第二步：修改MainParent.vue父组件 #

父组件维护弹窗显示状态和当前回调函数，点击不同按钮时更新这两个值：

<template>
  <div>
    <v-btn
      v-if="condition"
      color="primary"
      dark
      @click="openDialog(functionA)"
    >
      Function A
    </v-btn>
    <v-btn
      v-if="condition"
      class="primary"
      @click="openDialog(functionB)"
    >
      Function B
    </v-btn>
    <v-btn
      v-if="condition"
      class="primary"
      @click="openDialog(functionC)"
    >
      Function C
    </v-btn>

    <!-- 引入复用的Dialog组件 -->
    <DialogReusable
      v-model="dialogVisible"
      :on-submit="currentSubmitFunc"
    />
  </div>
</template>

<script>
import DialogReusable from './DialogReusable.vue'

export default {
  components: {
    DialogReusable
  },
  data() {
    return {
      condition: true,
      dialogVisible: false,
      currentSubmitFunc: null
    }
  },
  methods: {
    openDialog(submitFunc) {
      // 保存当前要执行的回调函数
      this.currentSubmitFunc = submitFunc
      // 打开弹窗
      this.dialogVisible = true
    },
    functionA() {
      console.log('执行Function A')
      // 这里写你的业务逻辑
    },
    functionB() {
      console.log('执行Function B')
      // 这里写你的业务逻辑
    },
    functionC() {
      console.log('执行Function C')
      // 这里写你的业务逻辑
    }
  }
}
</script>

额外优化点 #

• 如果需要处理异步回调（比如接口请求），可以把handleSubmit改成异步函数，等待回调执行完成后再关闭弹窗：

async handleSubmit() {
  await this.onSubmit()
  this.closeDialog()
}

• 可以给子组件添加标题、内容等props，让弹窗更通用，比如:title="dialogTitle"

内容的提问来源于stack exchange，提问作者Sarah Manning