在Kendo-UI Grid列模板中调用Vue组件方法报错的解决咨询

我明白你遇到的问题——在Kendo Grid的列模板里调用Vue组件内的方法时出现了ReferenceError，这其实是因为Kendo的模板执行上下文和Vue组件实例的上下文不在一起导致的。下面我给你几个可行的解决办法，包括适合全局共享格式化函数的方案：

问题根源 #

Kendo Grid的列模板是在全局JavaScript环境里执行的，而不是Vue组件的实例上下文。所以你直接写# testMethod(accountType) #时，它找不到组件里定义的testMethod方法，自然就报错了。

解决方案 #

1. 临时方案：把组件方法挂载到全局window #

这是最快解决问题的方式，把组件的方法暴露到全局window对象上：

<script>
export default {
  name: 'EmailAccounts',
  // ...其他data、methods代码
  mounted() {
    // 将组件方法挂载到全局window
    window.testMethod = this.testMethod;
  },
  beforeDestroy() {
    // 组件销毁时记得清理，避免内存泄漏
    delete window.testMethod;
  },
  methods: {
    testMethod(accountType) {
      return "foo";
    },
    // ...其他方法
  }
};
</script>

这样模板里的# testMethod(accountType) #就能正常调用了。不过这个方法只适合小项目或者临时测试，容易造成全局命名冲突，不推荐长期使用。

2. 推荐：用全局Mixin实现共享格式化函数 #

如果你的格式化函数需要在多个组件里复用，用Vue的全局Mixin是最好的选择。我们可以把通用方法注册到全局Mixin，再统一挂载到一个全局命名空间下：

首先在项目的入口文件（比如main.js）里注册全局Mixin：

// 注册全局共享方法
Vue.mixin({
  methods: {
    formatAccountType(type) {
      // 这里写你的通用格式化逻辑
      return type === 'IMAP' ? '邮件接收协议' : '其他协议';
    },
    testMethod(accountType) {
      return "foo";
    }
  }
});

// 将这些方法挂载到一个统一的全局对象，避免污染全局命名空间
Vue.prototype.$kendoUtils = {
  formatAccountType: Vue.prototype.formatAccountType,
  testMethod: Vue.prototype.testMethod
};
window.kendoUtils = Vue.prototype.$kendoUtils;

然后在Grid的模板里这样调用：

<kendo-grid-column 
  field="accountType" 
  title="Account Type" 
  template="# kendoUtils.testMethod(accountType) #"
></kendo-grid-column>

这种方式既实现了方法的全局共享，又不会乱污染全局环境，适合大型项目使用。

3. 最佳实践：使用Vue渲染函数 #

如果你想完全在Vue的上下文里处理，避免依赖全局对象，可以用Kendo Grid列的template属性接收一个Vue渲染函数：

<template>
  <div>
    <!-- ...其他Kendo Grid和DataSource代码 -->
    <kendo-grid :data-source-ref="'emailAccountDS'" ...>
      <!-- ...其他列 -->
      <kendo-grid-column 
        field="accountType" 
        title="Account Type" 
        :template="renderAccountType"
      ></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
export default {
  // ...其他代码
  methods: {
    testMethod(accountType) {
      return "foo";
    },
    renderAccountType(dataItem) {
      // 这里直接处于Vue组件的上下文，可以随意调用组件内的方法
      return this.testMethod(dataItem.accountType);
    }
  }
};
</script>

这种方式完全贴合Vue的开发模式，不需要任何全局对象，是最推荐的方案。

关于版本的说明 #

虽然Telerik提到2018.1+支持相关功能，但实际上Kendo Vue包装器的模板执行上下文还是和Vue组件实例分离的，所以还是需要通过上述方式来关联上下文。

内容的提问来源于stack exchange，提问作者tizzick