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

Question

I have a simple vue component with one method that I am trying to call outside of it's wrapper element #app but it is not triggering. Is there a way to reigster the view component so that I could call it with 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

I tested for a while.

1. It might be not able to use @ in elements outside of Vue element
2. The var viewModel seems not attached to window object

I can run with this though

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

First of all, it seems like you are attaching a click handler the "Vue" way, without actually it being a Vue component. That is not going to work.

To strictly achieve what you want, you have to expose your function to a different scope, eg via assigning it to a window attribute.

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();

A better way of doing this is probably by using a global event bus. Instead of exposing random functions in the global scope, you can instead create a bus that you expose instead. The nice part about that is that if everything happens within the Vue application, you could use this.$bus.$emit('...') from anywhere in the Vue application and listen to it everywhere else in the Vue application. The nice part if it is used outside the Vue application is that you use a set interface between the inside of your Vue application and the outside of your Vue application, preventing you from having to expose more and more functions in the global scope, and allowing you to figure out what can and cannot be done from outside the Vue application.

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");
    }
  }
});