Javascript 如何呼叫家长'；在handsontable/vue上的自定义渲染组件中的方法？

说明

我在hotTable中使用自定义渲染。 在自定义渲染器组件中，我想在单击图标时调用父级的方法。 我尝试使用事件和道具，但两者都不起作用

任何人请让我知道解决方案

演示

作为道具的方法

Home.vue

<hot-table :data="hotTableData" :autoRowSize="false" :autoColumnSize="false">
         <hot-column title="Character" width="350">
             <first-column method="handleUp" hot-renderer></first-column>
          </hot-column>                     
</hot-table>

......................................................................
......................................................................

import FirstColumn from "./FirstColumn.vue";

......................................................................
......................................................................

methods: {
    handleUp(id) {
         console.log(id);
    }
}

<hot-table :data="hotTableData" :autoRowSize="false" :autoColumnSize="false">
               <hot-column title="Character" width="350">
                   <first-column @onUpUserValue="handleUp" hot-renderer></first-column>
               </hot-column>
</hot-table>

......................................................................
......................................................................

method: {
    handleUp (event, id) {
            console.log(id);
     },
}

......................................................................
......................................................................
从“/FirstColumn.vue”导入FirstColumn；
......................................................................
......................................................................
方法：{
handleUp（id）{
console.log（id）；
}
}

FirstColumn.Vue

<template>
    <div>
          <div style="width: 30px;">
                <div style="height: 22px; line-height: 22px;">
                    <span v-on:click="upUserValue(value)"
                            class="glyphicon glyphicon-chevron-up"></span>
                </div>
                <label>{{value}}</label>
            </div>
    </div>
</template>

 <script>
 export default {
     props: {
         method: { type: Function },
     },
     data: function() {
         return {
             hotInstance: null,
             row: null,
             col: null,
             value: 0
         }
     },
     methods: {
         upUserValue(character_id) {
             this.method(character_id);
         }
     }
 }
 </script>

{{value}}
导出默认值{
道具：{
方法：{type:Function}，
},
数据：函数（）{
返回{
hotInstance:null，
行：空，
col:null，
数值：0
}
},
方法：{
upUserValue（字符\u id）{
该方法（字符\ id）；
}
}
}

错误：此.method不是函数

事件

Home.vue

<hot-table :data="hotTableData" :autoRowSize="false" :autoColumnSize="false">
         <hot-column title="Character" width="350">
             <first-column method="handleUp" hot-renderer></first-column>
          </hot-column>                     
</hot-table>

......................................................................
......................................................................

import FirstColumn from "./FirstColumn.vue";

......................................................................
......................................................................

methods: {
    handleUp(id) {
         console.log(id);
    }
}

<hot-table :data="hotTableData" :autoRowSize="false" :autoColumnSize="false">
               <hot-column title="Character" width="350">
                   <first-column @onUpUserValue="handleUp" hot-renderer></first-column>
               </hot-column>
</hot-table>

......................................................................
......................................................................

method: {
    handleUp (event, id) {
            console.log(id);
     },
}

......................................................................
......................................................................
方法：{
handleUp（事件，id）{
console.log（id）；
},
}

FirstColumn.vue

<template>
    <div>
          <div style="width: 30px;">
                <div style="height: 22px; line-height: 22px;">
                    <span v-on:click="upUserValue(value)"
                            class="glyphicon glyphicon-chevron-up"></span>
                </div>
                <label>{{value}}</label>
            </div>
    </div>
</template>

 <script>
 export default {
     props: {
         method: { type: Function },
     },
     data: function() {
         return {
             hotInstance: null,
             row: null,
             col: null,
             value: 0
         }
     },
     methods: {
         upUserValue(character_id) {
             this.$emit('onUpUserValue', character_id);
         }
     }
 }
 </script>

No Result

{{value}}
导出默认值{
道具：{
方法：{type:Function}，
},
数据：函数（）{
返回{
hotInstance:null，
行：空，
col:null，
数值：0
}
},
方法：{
upUserValue（字符\u id）{
这是。$emit（'onUpUserValue'，字符标识）；
}
}
}
无结果

你的环境

Vue包装器版本：^2.5.7

可与手机通话的版本：^7.4.2

@可手持/vue版本：^4.1.1

浏览器名称和版本：Chrome

---

操作系统：Windows 10

这是演示。你找到解决方案了吗？这是演示。你找到解决办法了吗？