VueJS传递函数作为Prop问题：TableComponent按钮无法访问选中行

我最近在开发一个支持可选行功能的基础TableComponent时，遇到了一个典型的上下文绑定问题：这个组件接收buttons Prop来渲染操作按钮组，但按钮click函数里的this指向的是父组件，根本没办法访问TableComponent自身的selectedRows这类内部属性。

最初的问题代码 #

父组件传入的buttons数组结构：

buttons: [{ 
  label: 'Manage Themes', 
  click: () => { 
    // 这里的this指向父组件，无法获取TableComponent的selectedRows
    if(this.selectedRows.length) { 
      this.$router.push({ 
        name: 'ManagePageOptions', 
        query: { 
          concernable_type: this.type, 
          concernable_ids: this.selectedRows.map(row => row.id).join(',') 
        }
      }); 
    } else { 
      alert('Please select 1 or more company or user'); 
    } 
  } 
}]

TableComponent中渲染按钮的代码：

<b-button v-for="button in this.buttons" @click="button.click" :key="button.label"> 
  {{ button.label }} 
</b-button>

我找到的解决方案：显式传递组件实例 #

后来我尝试把TableComponent的实例直接传递给click函数，发现完美解决了问题。这种方式其实是合理的，因为我们主动把需要访问的上下文传递给回调，从根源上避免了this绑定混乱的问题。

修改后的代码如下：

1. 父组件中更新buttons数组
   把click函数改为接收组件实例参数，通过参数直接访问子组件的属性：

buttons = [{ 
  label: 'Manage Pages', 
  click: (vm) => { 
    // vm就是TableComponent的实例，可以直接访问selectedRows等内部属性
    if(vm.selectedRows.length) { 
      vm.$router.push({ 
        name: 'ManagePageOptions', 
        query: { 
          concernable_type: vm.type, 
          concernable_ids: vm.selectedRows.map(row => row.id).join(',') 
        }
      }); 
    } else { 
      alert(Lang('Please select 1 or more company or user')) 
    } 
  } 
}];

2. TableComponent中传递实例给回调
   我最开始在data里定义了m_this指向组件实例，后来发现其实可以直接在模板里使用this（模板中的this本身就指向当前组件实例），没必要多定义一个变量：

// TableComponent的data部分（优化后）
data() { 
  return { 
    selectedRows: [], 
    // m_this: this, 这个属性可以直接去掉
  }; 
},

修改后的按钮渲染代码：

<b-button v-for="button in buttons" @click="button.click(this)" :key="button.label"> 
  {{ button.label }} 
</b-button>

为什么这种方式合理？ #

这种显式传递组件实例的做法是完全可行且推荐的：

• 它避免了this隐式绑定带来的上下文混淆问题，在Vue组件嵌套场景中尤其实用；
• 回调函数的依赖关系更清晰，阅读代码时能直接知道它需要访问子组件的哪些属性；
• 实现简单直接，不需要额外引入复杂逻辑（比如Vue的$emit或状态管理，当然复杂场景下这些方案也适用，但当前场景下显式传实例更高效）。

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