Vue封装KendoComboBox组件无法返回选中值，求代码问题排查

嘿，作为Vue新手刚接触组件封装遇到这种问题太正常啦～你的核心问题是没搞懂Vue组件和v-model配合的约定，还有Kendo控件的事件怎么和Vue的响应式系统对接上。我帮你拆解一下问题和解决方案：

问题根源 #

Vue的v-model本质是**value prop + input事件**的语法糖：父组件通过value给子组件传值，子组件通过触发input事件把新值回传给父组件。你的代码现在只emit了select事件，v-model根本监听不到，自然没法更新父组件的选中值；另外你也没处理父组件值变化时同步更新Kendo控件的逻辑。

修改后的完整代码 #

Vue.component('leave-type-2', {
  template: '<input :value="value" />',
  props: ['value'],
  data() {
    return {
      comboBox: null // 保存Kendo控件实例，方便后续操作
    }
  },
  mounted: function() {
    const self = this;
    // 初始化Kendo ComboBox并保存实例
    this.comboBox = $(this.$el).kendoComboBox({
      dataSource: {
        transport: {
          read: {
            url: "../LeaveTool/L..." // 保留你原有的接口地址
          }
        }
      },
      // 监听Kendo的select事件，触发Vue的input事件
      select: function(e) {
        const selectedItem = e.sender.dataItem(e.item.index());
        // 这里必须emit input事件，v-model才能捕获到变化
        self.$emit('input', selectedItem);
      }
    }).data('kendoComboBox');

    // 初始化时设置默认选中值
    if (this.value) {
      this.comboBox.value(this.value);
    }
  },
  watch: {
    // 当父组件v-model的值变化时，同步更新Kendo控件的选中状态
    value(newVal) {
      if (this.comboBox) {
        this.comboBox.value(newVal);
      }
    }
  },
  beforeDestroy() {
    // 销毁组件时清理Kendo控件，避免内存泄漏
    if (this.comboBox) {
      this.comboBox.destroy();
    }
  }
});

关键修改点说明 #

• 换成input事件触发：v-model默认监听input事件，所以在Kendo的select回调里要emitinput事件，把选中项传出去。
• 保存控件实例：把初始化后的ComboBox存在组件内部，方便后续更新值和销毁操作。
• 双向同步value：通过watch监听父组件传来的value变化，实时同步到Kendo控件；同时控件选中变化时回传给父组件。
• 初始化默认值：组件挂载时如果有初始选中值，自动设置给Kendo控件。
• 销毁清理：封装第三方控件时记得在组件销毁时清理控件，避免内存泄漏。

使用方式 #

现在你就可以正常用v-model绑定选中值了：

<leave-type-2 v-model="selectedLeaveType"></leave-type-2>

父组件里的selectedLeaveType会实时获取到KendoComboBox选中的项。

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