1

所以我正在创建一个带有可选行等的基本“TableComponent”。这个 TableComponent 需要一个名为“buttons”的道具。
TableComponent 期望按钮是一个对象数组,如下所示:

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');
        }
    }
}]

因此,在表格组件中,根据传递的内容创建了一行按钮,如下所示:

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

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

编辑: 我发现只需将“this”传递给 click 函数即可解决它。不知道这是否明智。

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,
    };
  },

_

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

1 回答 1

1

我同意有更好的方法来做到这一点的评论,范围插槽可能是最好的......

但是,如果你真的想传递这样的函数,你需要:

  1. 将处理程序定义从click: () => {}to更改click: function() {}- 原因是this 箭头函数的工作方式完全不同,因此this绑定到父 Vue 组件

  2. 将处理程序传递给按钮组件(在TableComponent模板内)时,将处理程序绑定到this您的处理程序,TableComponent如此处所述

于 2019-12-19T15:43:13.530 回答