javascript - 是否可以在 Vue.js 中嵌套方法以便对相关方法进行分组?

标签 javascript methods vue.js namespaces nested

我想将我的一些 Vue.js 方法组合在一种“子方法”类中,但我似乎只能有单级方法。

例如,如果我想要一组纯粹处理按钮操作的方法:

new Vue({

    el: '#app',

    data: { },

    methods: {

        buttonHandlers: {

            handler1: function() {
                dosomething;
            },

            handler2: function() {
                dosomething;
            }

        }

    }

});

我希望能够使用类似的东西:

<button v-on:click="buttonHandlers.handler1">Click Me</button>

但什么也没发生。

已经尝试通过添加括号强制函数运行:

<button v-on:click="buttonHandlers.handler1()">Click Me</button>

但我收到此控制台错误:

未捕获类型错误:scope.buttonHandlers.handler1 不是函数

我设置了一个小的 https://jsfiddle.net/ozx9oc4c/来证明我的意思。

如果有人知道在 Vue.js 中将函数逻辑分组到父方法下的方法,而不是没有真正结构的单级方法页面,我将不胜感激。

最佳答案

我最接近的做法是将父级声明为一个函数,并返回一个带有一组方法的对象。

例子:

new Vue({

  el: '#app',

  data: {},

  methods: {

    buttonHandlers: function() {
      var self = this; // so you can access the Vue instance below.

      return {

        handler1: function() {
          dosomething;
          self.doSomething();
        },

        handler2: function() {
          dosomething;
        },

      },

    }

  }

});

你可以这样调用方法:

<button @click="buttonHandlers().handler1()">Click Me</button>

关于javascript - 是否可以在 Vue.js 中嵌套方法以便对相关方法进行分组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36108953/

相关文章:

javascript - 在window.print = ""之后我如何使用javascript进行打印?

python - 静态方法语法困惑

vue.js - 如何解决Vue.js中的 "Adjacent JSX elements must be wrapped in an enclosing tag"问题

vue.js - VueJS : Get left, 元素的顶部位置?

javascript - 如何从 vue.js 中的并行组件动态更新 var

javascript - 在输入中输入数据,然后只显示在页面其他地方输入的文本

javascript - 多维表单数组到 JavaScript 对象

java - 计算返回无限值,为什么?

javascript - 如何从 jQuery.ajax 成功语句中推送父对象

javascript - 为什么方法括号内的函数声明会产生 method.variableName()?