子组件调用父组件的方法（提示框示例）

目的

很多时候，进行操作需要有一个提示框询问用户，是否进行该操作，比如：

进行数据管理的时候，有很多这样的提示框，可能就要写很多Modal，有个自定义组件就会方便很多

实现

自定义组件：

sureMsg:自定义组件询问的内容

btnType:按钮类型

sureOP：点击“确定”的时候，要执行的方法

// 操作确认框
// 调用  <ConfirmModal sureMsg="确认删除吗？" @func="方法名" btnType="1"></ConfirmModal>
// 按钮类别 ： 1-删除
<template>
  <div class="sureOp">
    <!-- 删除 -->
    <Button @click="showOPModal=true" type="error" v-if="btnType=='1'">删除</Button>
    <Modal v-model="showOPModal" @on-cancel="showOPModal=false" @on-ok="sureOP" title="操作提醒">
      <h3>{{sureMsg}}</h3>
    </Modal>
  </div>
</template>
<script>
export default {
  name: "confirmModal",
  props: {
    sureMsg: {
      type: String,
      default: ""
    },
    btnType: {
      type: String,
      default: "1"
    }
  },
  data() {
    return {
      showOPModal: false
    };
  },
  methods: {
    sureOP() {
      this.$emit("func");
    }
  }
};
</script>

普通调用已经在开头注释里了

 

表格render渲染这个组件：

{
          title: "操作",
          render: (h, params) => {
            let delBtn = h(ConfirmModal, {
              props: {
                sureMsg: "您确认要删除该条数据吗？",
                btnType: "1"
              },
              on: {
                func() {
                  console.log("点击确定的时候调用这个方法");
                }
              }
            });

            let btns = [];
            btns.push(delBtn);
            return h("div", btns);
          }
        }

 

如果带参的话

子组件中：

this.$emit("func",参数);

父组件中:

on: {
         func(参数) {
            console.log("点击确定的时候调用这个方法");
          }
     }