Question

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

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

许多类似的问题，例如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>

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

单文件组件方法中的Vue调用子组件方法

1 个答案: