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

Question

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

但我收到此控制台错误：

未捕获的 TypeError：scope.buttonHandlers.handler1 不是函数

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

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

Answer 1

其实有一个非常简单的技巧：在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
}

Answer 2

我使用这种模式：

模板：

<ExampleComponent
  :test="hello"
  @close="(arg) => example('close')(arg)"
  @play="(arg) => example('next')(arg)"
  @stop="(arg) => example('back')(arg)"/>

脚本：

...
methods: {
  test () {
    this.info('open')('test');
  },
  info (arg) {
    console.table({omg: [arg, '!']});
  },
  example (arg) {
    let self = this;
    const methods = {
      open (arg) {self.info(arg);},
      close (arg) { return self.example('play')(arg)},
      play (arg) {console.log(self, this)},
      stop () {console.error('Lo1')},
    };
    if (!Object.keys(methods).includes(arg)) return () => false;
    return methods[arg];
  },
}
...

第二种情况：

脚本：

const fabric = (arg, foo, context) => {
  const methods = foo(context);
  if (!Object.keys(methods).includes(arg)) return () => false;
  return methods[arg];
};

export default {
  ...
  methods: {
    test () {
      this.info('open')('test');
    },
    info (arg) {
      console.table({omg: [arg, '!']});
    },
    example (arg) {
      return fabric(arg, (cnx)=>({
        open (arg) {cnx.info(arg);},
        close (arg) { return cnx.example('play')(arg)},
        play (arg) {console.log(cnx, this)},
        stop () {console.error('Lo1')},
      }), this);
    },
  }
  ...
}

另外，我认为这不是一个好习惯，但它很有效，让我的工作更轻松。

Answer 3

我在编写 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：官方解决方案，Evan You said no。

Answer 4

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

例子：

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>

Answer 5

如果我有这个问题，我会使用 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>

代码仅供演示。 在现实生活中，我将在模板中传递一个数字或字符串参数，并使用 switch case 来确定处理程序。