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

我测试了一段时间。

在Vue元素之外的元素中可能无法使用@
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>

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应用程序外部之间使用设置接口，从而避免了在全局范围内公开越来越多的功能，并允许您可以从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");
    }
  }
});

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

2 个答案: