如何在Vue.js中的变量中传递方法名称

debugcn 发表于 Dev

布伦特·阿库尔

我不确定是否可以，但是我想做的就是将变量中的方法名称传递给孙子。

在我的页面上有一个“顶栏”组件，其中包含“按钮”组件。

// Home.vue
<my-topbar :buttons="buttons"></my-topbar>

data() {
  return {
    buttons: [
      {
        type: "icon",
        icon: "delete",
        label: "delete",
        method: "deleteSelections",
      },
      {
        type: "icon",
        icon: "upload",
        label: "upload",
        method: "saveToDatabase",
      }
    ]
  };
},


// Topbar.vue
<my-button v-for="(button, index) in buttons" :key="index" :button="button"></my-button>

// Button.vue
<v-btn @click="button.method">
    <v-icon v-if="button.type !== 'text'">{{icons[button.icon]}}</v-icon>
    <span v-if="button.type !== 'icon'">{{$t(`buttons[${button.label}]`)}}</span>
</v-btn>

我的问题是@ click =“ button.method”部分。当我单击它时，它返回：“ TypeError：_vm.button.method不是函数”

我尝试了这两种语法，但没有得到任何结果，在这种情况下甚至都没有错误：

:on-click="${button.method}"

@click="${button.method}"

如果有人可以告诉我正确的做法，我将不胜感激。谢谢。

皮匠

CSB链接

原谅缺乏样式，我不知道为什么文本没有显示在按钮上。但是-这就是我所做的。

buttons像现在一样，将数组传递到标题。在Button.vue添加@click处理程序以调用代理方法callMethod(button.method)。重要的部分是此代理方法：

 methods: {
    saveToDatabase() {
      console.log("Save to database!");
    },
    deleteSelections() {
      console.log("Delete seleciton!");
    },
    callMethod(method) {
      this[method]();
    }

的callMethod其全部是this[method]()。只要传入的方法存在于组件的方法中，它将对其进行调用。this在这种情况下，指的是组件。方括号将调用传入的值的评估值。这是对此的解释：https : //stackoverflow.com/a/45173791/7375929