javascript - 无法在其元素之外调用 Vue 组件方法

Question

我有一个简单的 vue 组件，它有一个方法，我试图在它的包装元素 #app 之外调用它，但它没有触发。有没有办法重新注册 View 组件，以便我可以使用 Component.function(); 调用它？

var viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML:

<div id="app">

</div>

<a @click="viewModel.test()">Click me!</a>

fiddle : https://jsfiddle.net/queeeeenz/Lja7pake/198/

Answer 1

我测试了一段时间。

1. 可能无法在 Vue 元素之外的元素中使用 @
2. var viewModel 似乎没有附加到窗口对象

虽然我可以运行它

JS

window.viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML

<div id="app">

</div>

<a onClick="viewModel.test()">Click me!</a>