iView Switch组件onChange/on-select方法应置于何处？（render函数场景）

我来帮你一步步解决这两个问题：

1. onChange方法应该放在哪里？ #

• 在Vue组件开发中，事件处理方法一般定义在组件的methods选项里，这样能确保方法的上下文（this）指向当前组件实例，方便你访问组件的数据、调用其他方法。
• 如果是在模板里绑定事件，直接写方法名就行；要是用render函数开发，事件必须挂载到配置对象的on属性下——这是Vue render函数绑定事件的标准方式。

2. iView Switch组件在render函数中的事件绑定问题 #

首先要纠正个小细节：iView的Switch组件切换触发的事件是on-change（对应模板里的@on-change），不是on-select哦。你代码里尝试了两种写法，我帮你排查并修正：

正确的绑定写法 #

在render函数里，所有事件都得放在on这个配置对象里，而且要对应组件的正确事件名。另外要注意上下文指向的问题，如果你的change_product_item_status_by_user_own_count是组件实例的方法，得保证this能正确指向组件，用箭头函数就能轻松解决这个问题。

修正后的代码示例：

render: (h, params) => {
  // 用箭头函数绑定上下文，确保this指向当前组件实例
  const handleSwitchChange = (value) => {
    debugger
    // 直接调用组件methods里的方法
    this.change_product_item_status_by_user_own_count(params, value)
  }

  return h('div', [
    h('i-switch', {
      props: {
        size:'large',
      },
      on: {
        // 对应iView Switch的on-change事件，render函数中用驼峰式命名
        onChange: handleSwitchChange
      }
    }, [
      h('span', {slot: 'open'}, 'Open'),
      h('span', {slot: 'close'}, 'Close')
    ])
  ])
}

之前写法失效的原因 #

• 你第一次尝试把onChange直接写在配置对象顶层，这不符合Vue render函数的规范，所有事件必须放在on对象内部才会生效。
• 如果你的context不是当前组件实例的正确引用，会导致方法调用失败，用箭头函数绑定this就能避免这个问题。
• 还要确认change_product_item_status_by_user_own_count确实定义在组件的methods中，参数传递也没有错误。

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