Vue-cli项目中如何在main.js调用.vue文件内的方法？

首先得明确：Vue组件里定义的方法是实例方法，不是静态方法——你不能直接拿着组件的导出对象去调用methods里的函数，必须先创建组件的实例，再通过实例来调用。下面分两种常见场景给你解决方案：

场景1：要调用的方法在普通组件（非根组件）里 #

比如你有个HelloWorld.vue，里面定义了方法：

<template>
  <div>Hello World</div>
</template>

<script>
export default {
  methods: {
    greet() {
      console.log('Hello from HelloWorld.vue!')
    }
  }
}
</script>

在main.js里，你需要先导入组件，然后手动创建它的实例，再调用方法：

import Vue from 'vue'
import HelloWorld from './components/HelloWorld.vue'

// 创建组件实例（如果不需要挂载到DOM，$mount()可以不传参数）
const helloInstance = new Vue(HelloWorld).$mount()

// 直接调用实例上的方法
helloInstance.greet() // 控制台会输出：Hello from HelloWorld.vue!

如果这个组件需要挂载到页面的某个DOM元素上，只需要给$mount()传入选择器，比如$mount('#greet-box')，之后依然可以通过helloInstance调用方法。

场景2：要调用的方法在根组件（比如App.vue）里 #

通常我们的根组件是App.vue，main.js里会通过render函数渲染它。这时候你不能直接拿根Vue实例去调用方法——因为根Vue实例和App.vue的组件实例是两个不同的对象。你需要先拿到App.vue的实例：

方法A：通过$refs获取实例（推荐） #

先修改App.vue，给根元素加上ref属性：

<template>
  <div id="app" ref="rootApp">
    <!-- 你的组件内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    rootMethod() {
      console.log('This is a method from App.vue!')
    }
  }
}
</script>

然后在main.js里，等组件挂载完成后，通过$refs拿到实例并调用方法：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 保存根Vue实例的引用
const vm = new Vue({
  render: h => h(App)
}).$mount('#app')

// 必须等DOM挂载完成后才能拿到$refs，所以用$nextTick
vm.$nextTick(() => {
  vm.$refs.rootApp.rootMethod() // 调用App.vue里的方法
})

方法B：在组件内暴露实例（简单但不推荐大型项目） #

如果你只是快速测试，可以在App.vue的生命周期钩子中把实例挂载到全局：

export default {
  created() {
    // 把组件实例挂载到window对象上
    window.appInstance = this
  },
  methods: {
    rootMethod() {
      console.log('This is a method from App.vue!')
    }
  }
}

然后在main.js里，同样等挂载完成后调用：

const vm = new Vue({
  render: h => h(App)
}).$mount('#app')

vm.$nextTick(() => {
  window.appInstance.rootMethod()
})

这种方式虽然简单，但会污染全局变量，大型项目里尽量避免使用。

为什么你之前会遇到“函数未定义”报错？ #

大概率是你尝试直接调用组件导出对象里的方法了，比如：

import App from './App.vue'
App.methods.rootMethod() // ❌ 错误！

组件的methods里的函数是绑定到组件实例上的，只有当组件被实例化后，这些方法才会被挂载到实例上，直接调用App.methods里的函数会因为没有上下文而报错，甚至根本找不到正确的函数引用。

内容的提问来源于stack exchange，提问作者Pavel Mironov