vue.js - 在 vue.js 中动态创建方法

Question

通常我们会像下面这样在 vue.js 中预定义方法。

methods : {
    func1: function(){

    } 
}

并在模板中调用一个函数

<button @click="func1">click</button>

是否可以在vue.js中动态添加方法？

[举例] //实际上$methods是不存在的。我检查了 $data 是否存在。所以这是我的猜测。

this.$methods["func2"] = function(){

}

在 angular.js 中可以这样。

$scope["function name"] = function(){

}

Answer 1

javascript 中的函数与任何其他变量一样，因此您可以通过多种方式动态添加函数。一个非常简单的解决方案如下所示:

<template>
  <div id="app">
    <div @click="userFuncs.myCustomFunction">Click me!</div>
  </div>
</template>

<script>
export default {
  name: "App",

  data () {
    return {
      // These contain all dynamic user functions
      userFuncs: {}
    }
  },

  created () {
    window.setTimeout(() => {
      this.$set(this.userFuncs, 'myCustomFunction', () => {
        console.log('whoohoo, it was added dynamically')
      })
    }, 2000)
  }
};
</script>

然而，当在没有附加函数的情况下调用该函数时，它会发出警告和潜在的错误。我们可以通过使用执行默认函数的样板函数来解决这个问题，除非定义了新函数。

然后我们将模板更改为:

<div @click="executeDynamic('myCustomFunction')">Click me!</div>

并将以下内容添加到组件中:

  methods: {
    executeDynamic (name) {
      if (this.userFuncs[name]) {
        this.userFuncs[name]()
      } else {
        console.warn(`${name} was not yet defined!`)
      }
    }
  }

---

您应该始终尝试通过 @someEvent 或 v-on:someEvent 处理程序来使用 Vue 的事件处理程序，因为 Vue 会在适当的时候自动附加和分离事件处理程序。在极少数情况下，您可能想做的事情可能无法通过 Vue 实现，您可以自己附加事件处理程序。只需确保使用 beforeDestroy Hook 再次删除它们即可。