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
– Casper, Commented Oct 16, 2019 at 3:42
@Casper onload is only an example. It may be finish of AJAX request for example — Boris
– Boris, Commented Oct 16, 2019 at 3:46
This might be helpful stackoverflow.com/questions/33682651/… — Casper
– Casper, Commented Oct 16, 2019 at 3: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
– Decade Moon, Commented Oct 16, 2019 at 5: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
– Boris, Commented Oct 16, 2019 at 5:27

Boris · Accepted Answer · 2019-10-22 11:51:22Z

2

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>

answered Oct 22, 2019 at 11:51

Boris

1,48917 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue call child component method in single file component approach

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related