我正在尝试使我的 Vue 组件可重用,但其中有一部分需要在单击按钮时运行我在父组件中定义的函数。 组件的按钮将始终运行父函数,并且它传递的参数始终相同(它唯一的其他属性)。
现在我将 2 个属性传递给组件:1) 一个对象和 2) 父函数引用,这需要 1) 中的对象作为参数。
子-Component 看起来像这样(去除了不必要的代码):
<button v-on:click="parentMethod(placement)">Analyze</button>
Vue.component('reporting-placement', {
props: ['placement', 'method'],
template: '#reporting-placement',
methods: {
parentMethod: function(placement) {
this.method(placement);
}
}
});
parent 是这样利用 child 的:
<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"></reporting-placement>
methods: {
analyzePlacement: function(placement) {
this.active_placement = placement;
},
}
如您所见,子项只有一个属性 placement
和回调引用。 placement
必须作为父级引用函数的参数放入。
但是由于父函数定义了参数,子函数不应该关心它需要传递给父函数的是什么。相反,我更愿意已经在父级中传递参数。
所以代替
<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement"></reporting-placement>
我更愿意
<reporting-placement v-bind:placement="placement" v-bind:method="analyzePlacement(placement)"></reporting-placement>
(包括 child 的适当变化)。 但是传递参数并不能那样工作。 是否有可能(也许在其他语法中)将变量“绑定(bind)”到函数引用,以便在调用回调时自动传递它?
信息:如果我像上面那样写下来,我不会收到错误消息,但是当我将参数传递给组件时,整个 Vue 都搞砸了。
希望问题很清楚 :-) 非常感谢!
最佳答案
通过阅读您的提案,我发现您过度使用了 Prop 传递。
您担心子组件不应该知道父组件使用数据的方式是完全可以接受的。 要实现这一点,您可以使用 Vue 的事件广播系统,而不是将方法作为 props 传递。 所以你的代码会变成这样:
Vue.component('reporting-placement', {
props: ['placement', 'method'],
template: '#reporting-placement',
methods: {
parentMethod: function(placement) {
this.$emit('reporting-placement-change', placement)
}
}
});
你可以这样使用它:
<reporting-placement v-bind:placement="placement" @reporting-placement-change="analyzePlacement($event)"></reporting-placement>
但是如果你需要父类方法提供的数据,最好考虑使用状态管理系统(可以是简单的 EventBus 或事件更复杂的 Vuex)
最后,如果你真的喜欢/必须将方法作为 prop 传递,你可以将它放在一个对象中,然后将该对象作为 prop 传递。
关于vue.js - 将函数作为属性传递给 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47559692/