在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钩子再次将其删除即可。