剑道网格详细信息模板和VueJS

我需要使用剑道用户界面渲染子网格。 Here is an example

在他们的示例中,基本上他们使用jQuery构建子网格,因此我将失去与Vue组件的连接。特别是,子网格必须有一些按钮来触发其他操作,比如显示一个模态然后删除一些数据。

<script>
  var myComponent = {
    name: 'myComponent'
    data() {
      ...
    },
    methods: {
      test: function (data) {
        // here I do something with the data
      }
    }
  }

  export default myComponent
</script>

通过先将myComponent定义为变量,我可以从我的剑道命令访问它:

$('<div />').appendTo(e.detailCell).kendoGrid({
  dataSource: e.data.someArray,
  columns: [
    {
      command: [
        {
          name: 'edit',
          click: function (e) {
            var data = this.dataItem($(e.target).closest('tr'))
            templatesManager.methods.test(data)  ---> HERE 
          }
        }
      ]
    }
  ]

我不喜欢引用我的组件的方法,而且由于我对Vue没有太多的经验,我想知道这是否是网格和我的组件之间通信的正确方式。不幸的是,我们不能摆脱剑道网格。 Here I found an example