Vue 之 父组件给子组件传参实现自定义弹窗组件

Posted 2023-02-15 zhuangwei_8256

目录

• • 父组件向子组件传参
  • 自定义弹窗组件

父组件向子组件传参

详情查看：Vue 之 组件之间的传值通信（多种方法，简洁而不失重点）

• 传统方式：通过属性 props 传参
• 特殊方式：通过 ref 调用子组件方法，然后通过方法传参

这里重点说明一下特殊方式，场景的不同决定传参的方式合适与否
 
比如自定义弹窗组件，需要的动态参数可能有：确定按钮的text、取消按钮的text、弹窗的文本内容、弹窗的title；

• 传统方式传参在某种特殊业务下可能不是那么完美：如果在一个页面中可能有操作的不同，不同的操作可能弹窗的数据不一样，这个时候如果使用 props 传参的话，一个弹窗组件4个属性，2个组件就8个……，这么下去的话，在当前vue 页面 data绑定的数据变量就可能有很多了；
• 而如果是通过ref 调用子组件的方法传参的话就方便很多了，直接在需要调用弹窗的方法里面自定义一个对象，把需要动态改变的参数塞到这个对象里面，在子组件中对传过来的参数进行接收，这样既满足了组件的复用性，又满足了组件的灵活性，并且调用组件的父组件也不用定义那么多数据变量了。

 
 

自定义弹窗组件

• 自定义弹窗代码如下：

<template>
  <!-- 自定义确认弹窗组件 -->
  <div class="dialog-container" v-if="isShow" @click.stop>
    <div class="dialog-box">
      <div class="dialog-title"> dialogData.title </div>
      <div class="dialog-message"> dialogData.message </div>
      <div class="dialog-btns">
        <el-button class="btn" @click="cancel"> dialogData.cancelText </el-button>
        <el-button type="primary" class="confirm-btn btn" @click="confirm"> dialogData.confirmText </el-button>
      </div>
    </div>
  </div>
</template>

export default 
  data() 
    return 
      isShow: false, // 是否显示弹窗
      // 弹窗的默认内容
      dialogData: 
        title: '提示', // 弹窗标题
        message: '请确认，是否提交！？', // 弹窗内容message
        cancelText: '取消', // 弹窗的取消按钮文字
        confirmText: '确认', // 弹窗的确认按钮文字
      ,
      defaultDialogData: , // 弹窗的默认内容
      // 弹窗确定的回调，当然这个也可以不用，直接用按钮的回调传参即可btnCallback
      confirmCallback: null,
      // 弹窗取消的回调，当然这个也可以不用，直接用按钮的回调传参即可btnCallback
      cancelCallback: null,
      // 弹窗按钮的回调
      btnCallback: null,
    
  ,
  methods: 
    open(dialogData) 
      // 保存初始的弹窗数据
      this.defaultDialogData = JSON.parse(JSON.stringify(this.dialogData))
      // 将传过来的弹窗数据赋值给当前数据
      this.dialogData = Object.assign(this.dialogData, dialogData)
      this.isShow = true
      // 这里定义返回一个 promise
      return new Promise((resolve, reject) => 
        // 方式一
        // this.confirmCallback = resolve
        // this.cancelCallback = reject
        // 方式二
        this.btnCallback = resolve
      )
    ,
    close() 
      // 重置弹窗相关数据
      this.dialogData = JSON.parse(JSON.stringify(this.defaultDialogData))
      this.isShow = false
    ,
    confirm() 
      // 方式一
      // if (this.confirmCallback) 
      //   this.confirmCallback('confirm')
      // 
      // 方式二
      if (this.btnCallback) 
        this.btnCallback('confirm')
      
      this.close()
    ,
    cancel() 
      // 方式一
      // if (this.cancelCallback) 
      //   this.cancelCallback('cancel')
      // 
      // 方式二
      if (this.btnCallback) 
        this.btnCallback('cancel')
      
      this.close()
    ,
  ,

• 调用自定义弹窗的父组件，就不写那么多东西了，简单两个按钮模拟一下
  

<template>
  <div>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
    <el-button type="warning" @click="handleDelete">删除</el-button>

    <ConfirmDialogVue ref="ConfirmDialog" />
  </div>
</template>

import ConfirmDialogVue from '@/components/ConfirmDialog/ConfirmDialog.vue'
export default 
  data() 
    return 
  ,
  components: 
    ConfirmDialogVue,
  ,
  methods: 
    async handleSubmit() 
      // 方式一
      // try 
      //   const res = await this.$refs.ConfirmDialog.open()
      //   if (res) 
      //     console.log('提交-确定-', res)
      //     // 调接口啥的
      //     // doing
      //   
      //  catch (rej) 
      //   console.log('提交-取消-', rej)
      //   // 取消的时候你如果想做点什么可以这里操作
      // 

      // 方式二，就不用 try catch了
      const res = await this.$refs.ConfirmDialog.open()
      if (res) 
        if (res == 'confirm') 
          console.log('提交-确定-', res)
          // 调接口啥的
          // doing
         else if (res == 'cancel') 
          console.log('提交-取消-', res)
          // 取消的时候你如果想做点什么可以这里操作
        
      
    ,
    handleDelete() 
      const dialogData = 
        message: '请确认，是否删除！？',
        confirmText: '删除',
      
      // 方式一
      // this.$refs.ConfirmDialog.open(dialogData)
      //   .then(res => 
      //     console.log('删除-确定-', res)
      //     // 调接口啥的
      //     // doing
      //   )
      //   .catch(rej => 
      //     console.log('删除-取消-', rej)
      //     // 取消的时候你如果想做点什么可以这里操作
      //   )

      // 方式二
      this.$refs.ConfirmDialog.open(dialogData).then(res => 
        if (res == 'confirm') 
          console.log('删除-确定-', res)
          // 调接口啥的
          // doing
         else if (res == 'cancel') 
          console.log('删除-取消-', res)
          // 取消的时候你如果想做点什么可以这里操作
        
      )
    ,
  ,

• 效果如下（样式有点难看暂请忽略……）
  

代码中使用了两种不同的方式解决弹窗按钮回调的问题，具体使用情况视情况而定。

 
 

如有不足，望大家多多指点！ 谢谢！