Htykuut

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/

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>

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, e.g. 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");

    }

  }

});