jQuery UI组件选项引用数组异常：子组件修改后主组件未同步

这确实是jQuery UI组件初始化时的选项克隆机制导致的问题。

具体原因拆解 #

jQuery UI的_Widget基类在创建组件实例时，会通过$.widget.extend方法合并默认选项与你传入的自定义选项。这个合并操作是深度递归克隆的——也就是说，对于数组、对象这类引用类型的选项，jQuery UI会创建一个全新的副本，而不是直接传递原始引用。

这就意味着，你的主组件传递给子组件的数组，其实已经被克隆成了一个独立的新数组。子组件修改的是这个副本，而非主组件持有的原数组，所以主组件自然看不到任何变化。这个设计是jQuery UI为了避免外部代码意外修改组件内部配置、保证每个组件实例独立性而做的刻意处理。

解决方案：共享引用的正确姿势 #

要让子组件和主组件操作同一个数组，你需要绕过jQuery UI的选项克隆机制，直接传递数组的原始引用。这里最可靠的方法是：

通过组件实例传递共享数据

把共享数组存储在主组件的实例属性中，然后将主组件实例本身作为选项传递给子组件。子组件通过这个实例直接访问数组：

// 主组件
$.widget("custom.mainComponent", {
  _create: function() {
    // 将共享数组存在组件实例上，而非选项中
    this.sharedData = [];
    
    // 创建子组件时传递主组件实例
    $("<div>").appendTo(this.element).childComponent({
      parentWidget: this
    });
  },
  
  // 提供方法获取最新数据
  getSharedData: function() {
    return this.sharedData;
  }
});

// 子组件
$.widget("custom.childComponent", {
  _create: function() {
    // 直接通过父组件实例获取共享数组的原始引用
    this.sharedData = this.options.parentWidget.sharedData;
    
    // 现在修改数组，主组件能同步看到变化
    this.sharedData.push("子组件添加的数据");
  }
});

你可以在两个组件的_create方法中打印console.log(this.sharedData === this.options.parentWidget.sharedData)，会返回true，说明两者指向同一个数组引用，修改后两边数据会完全同步。

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