Как передать несколько параметров дочернему компоненту из родительского компонента во время нажатия - PullRequest
Новая
       7

Как передать несколько параметров дочернему компоненту из родительского компонента во время нажатия

0 голосов
/ 27 декабря 2018

Как я могу отправить несколько параметров компоненту во время 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>`,

});

1 Ответ

0 голосов
/ 27 декабря 2018

Использование функции обратного вызова и применяются является одним из подходов: 

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>
...