Question

因此，我正在创建一个具有可选行等的基本“ TableComponent”。该TableComponent采用了一个称为“按钮”的道具。
TableComponent希望按钮是这样的对象数组：

["a", "b", "c"]

因此在表格组件中，将根据传递的内容创建一行按钮：

buttons: [{
    label: 'Manage Themes',
    click: () => {
        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');
        }
    }
}]

问题是在按钮单击功能中，“ this”是指父组件，因此我无权访问所选的行等。

编辑： 我发现仅将“ this”传递给click函数即可解决。不确定是否明智。

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

TableComponent数据：

buttons = [{
    label: 'Manage Pages',
    click: (vm) => {
        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'))
        }
    }
}];

_

data() {
    return {
      selectedRows: [],
      m_this: this,
    };
  },

Answer 1

我同意以下意见：有更好的方法可以做到这一点，作用域插槽可能是最好的。...

但是，如果您真的想传递类似的功能，则需要：

将处理程序定义从click: () => {}更改为click: function() {}-原因是this works completely different in arrow functions并因此this绑定到父Vue组件
在将处理程序传递到按钮组件（在TableComponent模板内部）时，将处理程序以described here
的方式绑定到this的{{1}}上li>

在vuejs中将函数作为prop传递

1 个答案: