this.$emit(data[i].Fun, a)为什么不执行父组件自定义事件呐？

Question

遇到问题
子组件循环this.$emit为什么不执行父组件自定义事件呐？

父组件

<template>
 <Table :table="dataTable"></Table>
<template>

<script>
import Table from "@/components/Table/index";

export default{
    data(){
        return{
            dataTable: {
                label: "操作",
                data: [
                  {
                    label: "上传&审核", // 按钮文字
                    Fun: "check", // 点击按钮后触发的父组件事件
                    size: "mini", // 按钮大小
                    id: "2" // 按钮循环组件的key值
                  },
                  {
                    label: "查看", // 按钮文字
                    Fun: "view", // 点击按钮后触发的父组件事件
                    size: "mini", // 按钮大小
                    id: "1" // 按钮循环组件的key值
                  }
                ]
            }
        }
    },
    methods:{
        view(data){
            console.log('自定义事件')//未触发
            console.log(data)//未触发
        },
        check(data){
            console.log('自定义事件')//未触发
            console.log(data)//未触发
        }
    }

}
</script>

子组件

<template>
   <template :table="table">
        el-table-column
        <el-button
          v-for="(item,index) in table.data"
          :class="item.classname ? item.classname : ''"
          :key="item.id"
          :size="item.size"
          @click="handleOperation(index, item.id)"
        >{{ item.label }}</el-button>
    </template>
</template>
<script>
export default{
 props: {
    table: {
        default() {
            return {
                data{}
            }
        }
    }
 },
 methods:{
    handleOperation(a, id) {
        const data = this.table.data
        for (let i = 0; i < data.length; i++) {
          if (id === data[i].id) {
            console.log(data[i].Fun)//点击父组件可以打印出view和check
            this.$emit(data[i].Fun, a);
          }
        }
     },
 }
</script>

Answer 1

<template>
 <Table :table="dataTable" @check="check" @view="view"></Table>
<template>

<script>
import Table from "@/components/Table/index";

export default{
    data(){
        return{
            dataTable: {
                label: "操作",
                data: [
                  {
                    label: "上传&审核", // 按钮文字
                    Fun: "check", // 点击按钮后触发的父组件事件
                    size: "mini", // 按钮大小
                    id: "2" // 按钮循环组件的key值
                  },
                  {
                    label: "查看", // 按钮文字
                    Fun: "view", // 点击按钮后触发的父组件事件
                    size: "mini", // 按钮大小
                    id: "1" // 按钮循环组件的key值
                  }
                ]
            }
        }
    },
    methods:{
        view(data){
            console.log('自定义事件')//未触发
            console.log(data)//未触发
        },
        check(data){
            console.log('自定义事件')//未触发
            console.log(data)//未触发
        }
    }

}
</script>

Answer 2

用法不对， 在父组件你要v-on自定义事件，绑定函数。再仔细看看文档