在vue中使用handsontable，实现自定义按钮并触发事件

在项目里摸爬滚打的时候遇到个奇怪的实现。首先项目用的是6.2.0版本的handsontable。需求是希望在表格列里面加按钮。照着原来的代码抄的时候看到这个$page死活不能理解。

<template>
  <hot-table :settings="settings"></hot-table>
</template>

<script>
import { HotTable } from '@handsontable/vue'
export default {
  components: { HotTable },
  data() {
    return {
      settings: {
        licenseKey: 'non-commercial-and-evaluation',
        columns: [
          { title: '年份', data: 'year' },
          { title: '老王', data: 'laowang' },
          { title: '老李', data: 'laoli' },
          {
            title: '老赵',
            data: 'laozhao',
            renderer: this.renderButtons
          },
        ],
        data: [
          { year: '2021', laowang: '22', laoli: '23', laozhao: '24' },
          { year: '2022', laowang: '23', laoli: '24', laozhao: '25' },
          { year: '2023', laowang: '24', laoli: '25', laozhao: '26' },
          { year: '2024', laowang: '25', laoli: '26', laozhao: '27' },
        ]
      }
    }
  },

  methods: {
    renderButtons(instance, td, row, col, prop, value) {
      td.innerHTML = `<button οnclick='$page.showProps(${value})'>${value}</button>`;
    },

    showProps(value) {
      console.log(value);
    }
  },
}
</script>

<style scoped></style>

说来奇怪，还真能跑。但是我自己新建项目抄一遍就报错。显然是前端大哥在某个地方塞东西了但是我没找到

renderButtons(instance, td, row, col, prop, value) {
      td.innerHTML = `<button οnclick='$page.showProps(${value})'>${value}</button>`;
},

由于项目封装了自定义的组件一时半会不知道怎么实现的。最后忽然想开了试着自己新建了一个vue项目加了点代码还真就成了。（其实就是往window里面塞东西）

 mounted() {
    window.$page = this;
    window.$page.showProps = this.showProps;
  },

  beforeDestroy() {
    Reflect.deleteProperty(window, $page);
  }

这样写之后就能正常跑代码了