vue.js - 如何在单击期间将多个参数从父组件传递给子组件
问题描述
如何在 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>`,
});
解决方案
使用回调函数并应用是一种方法:
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>
推荐阅读
- multidimensional-array - 如何为嵌套数组编写 JOLT Spec?
- node.js - npm 卡在获取一些包上,使用 --verbose 后,CLI 中没有任何反应
- ios - UIImagePickerController 允许选择方形图像。但是我怎样才能使它成为 16:9?
- r - 使用函数在ggplot中手动着色
- c# - 如何仅在 Xamarin Forms XAML 中设置左边距?
- gnuplot - 语法错误“数据块名称必须后跟 << EODmarker”
- python - 嵌入C++时如何链接正确的python版本?
- coq - 两个参数的结构递归
- angular - PrimeNG Turbotable 全部展开
- android - Kotlin - 对象表达式中的继承