Метод вызова дочернего компонента Vue в подходе с одним файловым компонентом

Question

Я новичок в Vue, и есть кое-что очень простое, что я не могу понять.

• Как отдельный компонент Vue файла может вызывать свой метод в коде javascript?

• Как родительский компонент одного файла может вызывать методребенка в коде javascript?

Многие подобные вопросы задавались, например, здесь , но все они дают пример создания основного объекта приложения Vue. В моем случае он скрыт в main.js сгенерированного стандартного кода, который, как я полагаю, должен остаться без изменений (предположение может быть ошибочным по причине).

Учитывая следующий простой шаблон из учебника Vue, - как можноЯ вызываю метод doStuff внутри кода javascript (кажется, что он не определен, хотя он работает как обработчик кликов) - как я могу вызвать методы HelloWorld .?:-

<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>

Answer 1

Чтобы иметь возможность вызывать методы компонента vue внутри любого кода JavaScript. Нужно скопировать эту переменную в глобальную переменную. Это можно сделать созданным или смонтированным способом. Переписав код выше, он должен выглядеть так:

<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>