Question

如何在onClick期间向组件发送多个参数。我已经在下面提到了代码，当我传递单个参数时，它可以工作，但是当我尝试传递多个参数时，它不起作用。因此，如何更改点击功能以使其适用于多个参数。

任何帮助表示赞赏。预先感谢

代码已通过传递多个参数的测试（无效）

<save-job-step cssClass="fa fa-save" v-bind:onClick="saveHazard" 
:id="hazard.id" :detail="hazard.detail" :consequence="hazard.consequence" 
class="save-job-step-icon">
</save-job-step>

let saveComponent = Vue.component('save-component', {
props: {
    label: {
        type: String,
        default: ''
    },
    id: {
        type: String,
        default: ''
    },
    detail: {
        type: String,
        default: ''
    },
    consequence: {
        type: String,
        default: ''
    },
    cssClass: {
        type: String,
        default: ''
    },
    onClick: Function,
    setStyle: {
        type: String,
        default: ''
    }
},
template: `<i :class="cssClass" @click="onClick(id,detail,consequence)"></i>`,

}）;

单个参数的工作代码： 组件1

<save-job-step cssClass="fa fa-save" v-bind:onClick="saveHazard" 
:id="pHazard.id" class="save-job-step-icon">
</save-job-step>

methods: {
  saveHazard: function (id) {
            alert(currentHazardId);
        }
},

组件2

let saveComponent = Vue.component('save-component', {
props: {
    label: {
        type: String,
        default: ''
    },
    id: {
        type: String,
        default: ''
    },
    cssClass: {
        type: String,
        default: ''
    },
    onClick: Function,
    setStyle: {
        type: String,
        default: ''
    }
},
template: `<i :class="cssClass" @click="onClick(id)"></i>`,

}）;

Answer 1

使用回调函数和apply是一种方法：

Vue.component('save-component', {
  props: ['id', 'label', 'detail', 'consequence', 'callback'],
  methods: {
    someAction(...args) {
      this.callback.apply(null, args)
    }
  },
  template: `<div>
  <v-btn @click="() => callback.apply(null, [id, label, detail, consequence])" color="indigo" dark>Click Me</v-btn>
  </div>
  `
})

new Vue({
  el: '#app',
  data() {
    return {
      id: 1,
      label: 'foo',
      detail: 'bar',
      consequence: 'baz',
      callback: (...args) => {
        alert(JSON.stringify(args))
      }
    }
  }
})

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout>
          <save-component :id="id" :label="label" :detail="detail" :consequence="consequence" :callback="callback"></save-component>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

单击期间如何将多个参数从父组件传递到子组件

1 个答案: