Question

我正在尝试使我的Vue组件可重用，但是其中有一部分要求在按钮单击上运行一个我在父组件中定义的函数。组件的按钮将始终运行父函数，它传递的参数始终相同（唯一的其他属性）。

现在我将2个属性传递给组件：1）一个对象和2）父函数引用，它需要1）中的对象作为参数。

Child -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);
        }
    }
});

父正在使用这样的孩子：

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

（包括孩子的适当变化）。但传递参数不会那样。是否有可能（可能在其他语法中）绑定＆＃39;函数引用的变量，以便在调用回调时自动传递？

信息：如果我将其写下来，我不会收到错误信息，但是当我将参数传递给组件时，整个Vue都会搞砸。

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

Answer 1

通过阅读你的提议，我发现你过度使用道具。

您对子组件不应该了解父组件使用数据的方式的担心是完全可以接受的。为此，您可以使用Vue的事件广播系统，而不是将该方法作为道具传递。所以你的代码会变成这样：

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）

最后，如果你真的喜欢/必须将方法作为道具传递，你可以将它放在一个对象中，并将该对象作为道具传递。

将函数作为属性传递给Vue组件

1 个答案: