通过 v-on:click 调用函数内部的函数

Question

如何在函数中调用函数？

模板 ： (网页(

<a v-on:click="hello.world"></a>

JS ：(作为组件(

methods: {
    hello: function() {
        return {
            world: function() {
                alert('hello world');
            }
        };
    }
}

我收到警告：

[Vue 警告]：事件"点击"的处理程序无效：未定义

这可以通过JS调用this.hello().world()，但不能像v-on那样在模板(html(中调用

我错过了什么？

Answer 1

它应该以不同的方式使用以使其工作

<a v-on:click="hello().world()">foo</a>

http://jsbin.com/lizerazire/edit?html,js,output

Answer 2

我不认为这是一个vue问题。

this.hello().world()无效，因为world()现在无法访问。尝试在 和 hello 函数中添加双括号()：

methods: {
  hello: function() {
    return {
        world: function() {
            alert('hello world');
        }
    }();
  }
}

您现在可以像这样访问内部函数：this.hello.world() ;

Answer 3

只需将 world 定义为方法内部、全局或 vue 组件中的函数，并以常规方式调用它。

<a @click="hello">foo</a>

function world() {
  alert("hello world");
}
<vue component> {
  methods: {
    hello: function() {
        world();
    }
  }
}

或者这个

<vue component> {
  methods: {
    hello: function() {
        this.world();
    },
    world: function() {
        alert("Hello world");
    }
  }
}