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

Is it possible to nest methods in Vue.js in order to group related methods?

本文关键字：方法 js Vue 是否 嵌套      更新时间：2023-09-26

我想将我的一些 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>

实际上有一个非常简单的技术：在created钩子中定义你的嵌套方法：

created() {
  this.on = {
    test: () => {console.log(this)}
  }
  this.on.test();
}

注意：两件事，A）在这种情况下，您必须使用箭头函数和B）如果这对您来说感觉"黑客"，可能是因为created生命周期钩子的混乱，您可以随时委托给一种方法，假设this.namespaceMethods()，例如：

created() {
  this.namespaceMethods();
  // call namespaced methods
  this.foo.bar();
  this.foobar.baz();
  // etc.
},
methods: {
  this.namespaceMethods() {
    this.foo = {
      bar: () => {console.log("foobar")}
    },
    this.foobar = {
      baz: () => {console.log("foobarbaz")}
    }
  },
  // etc
}
如果我

遇到这个问题，我会使用 click handler（） 将请求委托给其他方法。例如：

new Vue({
    el: '#app',
    data: { },
    methods: {
        handler1: function() {
             console.log("handler 1 called");
        },
        handler2: function() {
            console.log("handler 2 called");
        },
        buttonHandler:function(callback){
            callback();
        }

    }
});

并使用 HTML 作为

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

该代码仅用于演示。在现实生活中，我将在模板中传递一个数字或字符串参数，并使用开关大小写来确定处理程序。

我在编写 Vue mixin 时遇到了同样的问题（需要命名空间）。这个答案并不直接解决你的情况，但它可以提供线索。

这就是我定义mixin的方式。

export default {
   created () {
    // How to call the "nested" method
    this.dummy('init')
    // Pass arguments
    this.dummy('greet', {'name': 'John'})
   },
   // Namespaced methods
   methods: {
     dummy (name, conf) {
       // you can access reactive data via `that` reference,
       // from inside your functions
       const that = this
       return {
         'init': function (conf) {
            console.log('dummy plugin init OK')
         },
         'greet': function (conf) {
            console.log('hello, ' + conf['name'])
         }
       }[name](conf)
     }
   }
 }

PS：对于官方解决方案，埃文尤说不。

相关文章：