vue.js - 将函数作为属性传递给 Vue 组件

Question

我正在尝试使我的 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 都搞砸了。

希望问题很清楚 :-) 非常感谢!

Answer 1

通过阅读您的提案，我发现您过度使用了 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 传递。