Vue call child component method in single file component approach

Question

I am new to Vue, and there's something very basic I cannot figure out.

How a single file Vue component can call a method of itself in javascript code?
How a single file parent component can call a method of child in a javascript code?

Many similar questions were asked like herebut they all give an example of creating the Vue main application object. In my case it is hidden in the main.js of the generated boilerplate code which I assume should stay intact (the assumption may be wrong of cause).

Given the following simple template from Vue tutorial, - how can I call the doStuff method inside the javascript code (it appears to be undefined though it works as a click handler) - how can i call the HelloWorld methods.?:-

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld ref="foo" msg="Welcome to Your Vue.js App"/>
    <a @click="doStuff()">Click me!</a> <!-- HERE IT WORKS -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  methods: {
      doStuff: function doStuff () {
        alert(this.$refs.foo.DoStuff); // THIS WORKS
     }
  }

}

window.onload = function(e){ 
    alert(doStuff); // DO STUFF IS UNDEFINED
}
</script>

don't need to call doStuff() on load, you can use mounted() and call this.doStuff() — Casper, Oct 16 '19 at 03:42
@Casper onload is only an example. It may be finish of AJAX request for example — Boris, Oct 16 '19 at 03:46
This might be helpful https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component — Casper, Oct 16 '19 at 03:52
`doStuff` is *method* of the component, not a global function. You need to call it from an instance of the component, such as `comp.doStuff()`. Typically `ref` is used to get the component instance. — Decade Moon, Oct 16 '19 at 05:25
@DecadeMoon Do you have an example of accessing the refs? All examples I have seen involve creating Vue component. I am not sure that is what intended in this case. — Boris, Oct 16 '19 at 05:27
what exactly are you trying to do? In general a vue component is an object, within the context of the component you have access to the methods property and with that the methods but outside of it, you need to access it properly. Console log the component (from the parent) and then you will see the structure and how to access. — Michael, Oct 16 '19 at 13:13

score 1 · Answer 1 · answered Oct 22 '19 at 11:51

To be able to call vue component methods inside any javascript code. One should copy this variable into global variable. This can be done in created or mounted method. Rewriting the code above it should be like

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld ref="foo" msg="Welcome to Your Vue.js App"/>
    <a @click="doStuff()">Click me!</a> <!-- HERE IT WORKS -->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

var vue = undefined

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  created(){ vue = this; } 
  methods: {
      doStuff: function doStuff () {
        alert(this.$refs.foo.DoStuff); // THIS WORKS
     }
  }

}

window.onload = function(e){ 
    alert(vue.doStuff()); // Now it is OK
}
</script>

Vue call child component method in single file component approach

1 Answers1