vue单文件组件方式调用子组件方法答案

【问题标题】：Vue call child component method in single file component approachvue单文件组件方式调用子组件方法
【发布时间】：2020-02-12 18:26:39
【问题描述】：

我是 Vue 的新手，有一些非常基本的东西我无法弄清楚。

单个文件的Vue组件如何在javascript代码中调用自身的方法？
单文件父组件如何在javascript代码中调用child的方法？

问了很多类似的问题，例如here，但它们都给出了创建 Vue 主应用程序对象的示例。在我的情况下，它隐藏在生成的样板代码的 main.js 中，我假设它应该保持不变（假设可能是错误的原因）。

鉴于以下来自 Vue 教程的简单模板， - 如何在 javascript 代码中调用 doStuff 方法（虽然它作为点击处理程序工作，但它似乎未定义） - 如何调用 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>

【问题讨论】：

加载时不需要调用doStuff()，可以使用mounted()调用this.doStuff()
@Casper onload 只是一个例子。例如，它可能是 AJAX 请求的完成
这可能会有所帮助stackoverflow.com/questions/33682651/…
doStuff 是组件的方法，而不是全局函数。您需要从组件的实例中调用它，例如comp.doStuff()。通常ref 用于获取组件实例。
@DecadeMoon 你有访问裁判的例子吗？我见过的所有示例都涉及创建 Vue 组件。我不确定这就是这种情况下的意图。

标签： javascript vue.js vuejs2

【解决方案1】：

能够在任何 javascript 代码中调用 vue 组件方法。应该将此变量复制到全局变量中。这可以在创建或安装的方法中完成。重写上面的代码应该是这样的

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

【讨论】：