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

Question

我有一个简单的 vue 组件，其中包含一种方法，我试图在它的包装元素 #app 之外调用它，但它没有触发。 有没有办法重新注册视图组件，以便我可以使用 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>

小提琴： https : //jsfiddle.net/queeeeenz/Lja7pake/198/

Answer 1

我测试了一段时间。

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

不过我可以用这个跑步

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>

Answer 2

首先，您似乎以“Vue”的方式附加了一个点击处理程序，而实际上它并不是一个 Vue 组件。 那是行不通的。

为了严格实现你想要的，你必须将你的函数暴露给不同的范围，例如通过将它分配给一个 window 属性。

var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    // Now it is exposed
    window.test = this.test;
  },
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

// And later
window.test();

这样做的更好方法可能是使用全局事件总线。 您可以创建一个您公开的总线，而不是在全局范围内公开随机函数。 这样做的好处是，如果一切都发生在 Vue 应用程序中，您可以在 Vue 应用程序的任何地方使用this.$bus.$emit('...')并在 Vue 应用程序的其他任何地方收听它。 如果在 Vue 应用程序之外使用它的好处是，您可以在 Vue 应用程序内部和 Vue 应用程序外部之间使用 set 接口，从而防止您不得不在全局范围内暴露越来越多的函数，并允许你要弄清楚在 Vue 应用程序之外什么可以做，什么不能做。

import Vue from 'vue';
export const bus = new Vue();

// Elsewhere
import { bus } from './bus';
Vue.prototype.$bus = bus;

// In outside code
import { bus } from '../../my-vue-application/bus';
bus.$emit('test');

// In your component
var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    this.$bus.$on('test', this.test);
  },
  beforeDestroy () {
    this.$bus.$off('test', this.test);
  },
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});