时间戳

首页 > 解决方案 > 在 vuejs 中将函数作为道具传递

javascript - 在 vuejs 中将函数作为道具传递

问题描述

所以我正在创建一个带有可选行等的基本“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>

标签： javascriptfunctionvue.jsscopevue-props

解决方案

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

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

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

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

推荐阅读