Vue项目中如何正确导入其他组件methods中的函数？

首先明确：组件methods里的函数是实例方法，只能在组件的实例上调用，不能直接通过组件选项对象（比如你写的A）调用；而且不同页面的组件实例相互独立，必须通过跨组件通信的方式实现调用。以下是几种可行方案：

方案1：抽成独立工具函数（优先推荐） #

如果myFunc不需要依赖A组件的实例（比如不用访问this、组件内的data/props），直接把它抽成独立工具函数是最简单的方式：

1. 创建工具文件：

// utils/functions.js
export const myFunc = () => {
  console.log("Wanted function")
}

2. 在A.vue中导入使用：

<!-- A.vue -->
<script>
import { myFunc } from '@/utils/functions'
export default {
  methods: {
    // 组件内需要调用时直接用
    callMyFunc() {
      myFunc()
    }
  }
}
</script>

3. 在B.vue中直接导入调用：

<!-- B.vue -->
<script>
import { myFunc } from '@/utils/functions'
export default {
  mounted() {
    myFunc() // 直接调用即可
  }
}
</script>

方案2：使用状态管理（适合复杂场景） #

如果myFunc必须依赖A组件的实例，可通过状态管理触发组件内的方法执行：

Vue2 + Vuex #

1. 定义Vuex store：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    triggerMyFunc: false
  },
  mutations: {
    SET_TRIGGER(state, value) {
      state.triggerMyFunc = value
    }
  }
})

2. A.vue监听状态变化触发方法：

<!-- A.vue -->
<script>
export default {
  methods: {
    myFunc() {
      console.log("Wanted function")
    }
  },
  watch: {
    '$store.state.triggerMyFunc'(newVal) {
      if (newVal) {
        this.myFunc()
        // 触发后重置状态，避免重复执行
        this.$store.commit('SET_TRIGGER', false)
      }
    }
  }
}
</script>

3. B.vue修改状态触发方法：

<!-- B.vue -->
<script>
export default {
  mounted() {
    this.$store.commit('SET_TRIGGER', true)
  }
}
</script>

Vue3 + Pinia #

1. 创建Pinia store：

// stores/funcStore.js
import { defineStore } from 'pinia'

export const useFuncStore = defineStore('func', {
  state: () => ({
    triggerMyFunc: false
  }),
  actions: {
    setTrigger(value) {
      this.triggerMyFunc = value
    }
  }
})

2. A.vue监听状态变化：

<!-- A.vue -->
<script setup>
import { useFuncStore } from '@/stores/funcStore'
import { watch } from 'vue'

const store = useFuncStore()

const myFunc = () => {
  console.log("Wanted function")
}

watch(() => store.triggerMyFunc, (newVal) => {
  if (newVal) {
    myFunc()
    store.setTrigger(false)
  }
})
</script>

3. B.vue触发状态变化：

<!-- B.vue -->
<script setup>
import { useFuncStore } from '@/stores/funcStore'
import { onMounted } from 'vue'

const store = useFuncStore()

onMounted(() => {
  store.setTrigger(true)
})
</script>

方案3：事件总线（适合简单跨组件通信） #

Vue2 #

1. 全局注册事件总线：

// main.js
import Vue from 'vue'
Vue.prototype.$bus = new Vue()

2. A.vue监听自定义事件：

<!-- A.vue -->
<script>
export default {
  methods: {
    myFunc() {
      console.log("Wanted function")
    }
  },
  mounted() {
    this.$bus.$on('callMyFunc', this.myFunc)
  },
  beforeDestroy() {
    // 销毁前解绑事件，避免内存泄漏
    this.$bus.$off('callMyFunc', this.myFunc)
  }
}
</script>

3. B.vue触发事件：

<!-- B.vue -->
<script>
export default {
  mounted() {
    this.$bus.$emit('callMyFunc')
  }
}
</script>

Vue3 #

Vue3移除了$on/$off，可使用第三方库mitt实现：

1. 安装依赖：

npm install mitt

2. 创建事件总线实例：

// utils/bus.js
import mitt from 'mitt'
export const bus = mitt()

3. A.vue监听事件：

<!-- A.vue -->
<script setup>
import { bus } from '@/utils/bus'
import { onMounted, onUnmounted } from 'vue'

const myFunc = () => {
  console.log("Wanted function")
}

onMounted(() => {
  bus.on('callMyFunc', myFunc)
})

onUnmounted(() => {
  bus.off('callMyFunc', myFunc)
})
</script>

4. B.vue触发事件：

<!-- B.vue -->
<script setup>
import { bus } from '@/utils/bus'
import { onMounted } from 'vue'

onMounted(() => {
  bus.emit('callMyFunc')
})
</script>

注意：如果A组件当前未挂载（不在当前页面），上述基于组件实例的方案会失效，此时优先考虑方案1。

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