vue2子组件动态emit父组件方法

动态emit父组件方法。

完整代码

<!-- 子组件 -->
<template>
	<!-- ...省略其他代码... -->
	
	<baseTable
        :columns="listData.columns"
        :tableData="listData.tableData"
        :total="listData.total"
        :queryParams="listData.queryParams"
        @getList="getList(listData.listMethod)"
      >
        <template
          v-for="item in listData.columns"
          v-if="item.slot"
          :slot="item.slot"
          slot-scope="scope"
        >
          <u v-if="infoFlag && scope.row[item.key]">
          	<!-- 
          		listData.infoMethod动态方法名
          	-->
            <a @click="getInfo(listData.infoMethod, scope)">
              {{ scope.row[item.key] }}
            </a>
          </u>
          <span v-else>
            {{ scope.row[item.key] }}
          </span>
        </template>
     </baseTable>
     
   <!-- ...省略其他代码... -->
</template>

<script>
export default {
	methods: {
		/**
     	* 获取详情的接口
     	* @param {String} Fun 触发父组件的方法名
     	* @param {Object} record 当前行数据
    	 */
		getInfo(Fun, record) {
      		this.$emit("getInfo", Fun, record);
   		},
	}
}
</script>

// 父组件
<template>
	<!-- ...省略其他代码... -->
   <ChildComponent
      ref="ChildComponent"
      :listData="listData"
      @getInfo="getInfo"
    />
    <!-- ...省略其他代码... -->
</template>

<script>
export default {
	data() {
		listData: {
        title: "分布区间",
        tableData: [],
        total: 0,
        // table列
        columns: [
          {
            label: "名称",
            key: "name",
            minWidth: 100,
            slot: "name",
          },
          {
            label: "<14数量",
            key: "lessThanFourteen",
            minWidth: 100,
            slot: "lessThanFourteen",
          },
          {
            label: "14-18数量",
            key: "fourteenToEighteen",
            minWidth: 100,
            slot: "fourteenToEighteen",
          },
          {
            label: "18-20数量",
            key: "eighteenToTwenty",
            minWidth: 100,
            slot: "eighteenToTwenty",
          },
          {
            label: "20-22数量",
            key: "twentyToTwentyTwo",
            minWidth: 100,
            slot: "twentyToTwentyTwo",
          },
          {
            label: "22-24数量",
            key: "twentyTwoToTwentyFour",
            minWidth: 100,
            slot: "twentyTwoToTwentyFour",
          },
          {
            label: ">=24数量",
            key: "greaterThanTwentyFour",
            minWidth: 100,
            slot: "greaterThanTwentyFour",
          },
        ],
        queryParams: {
          pageNum: 1,
          pageSize: 15,
        },
        listMethod: "getRangeList",
        infoMethod: "getRangeInfoFun", // 获取详情的方法
      }
	},
	methods: {
		getInfo(Fun, record) {
      		this[Fun](record); //动态触发方法Fun
   		},
   		getRangeInfoFun(record) {
      		let {name, key, level, orgId} = record.row;
      		this.rangeInfo.queryParams = {
        		name,
        		range: key,
        		level,
        		orgId,
     		 };
      		getRangeInfo(this.rangeInfo.queryParams).then((res) => {
        		// 继续其他代码
      		});
   		 },
	}
}
</script>

上述代码中：

1. 父组件将触发的方法名以变量形式给到子组件，子组件emit时将方法名作为参数(我这里定义的参数名为Fun)接收
2. 父组件中动态调用即this[Fun](record);