Vue混入(Mixin)中导入的方法未被Transition识别

你遇到的这个报错，核心问题出在Mixin的导出方式不对，导致Vue组件没能正确识别并混入你写的滑动动画方法。咱们一步步来修复：

1. 修正Mixin文件的导出语法 #

打开你的transition-mixins.js，把原来的导出代码改成ES模块标准的默认导出写法：

export default { 
  slideEnter: function() {
    // 你的滑动进入动画逻辑
  }, 
  slideLeave: function() {
    // 你的滑出动画逻辑
  } 
}

你之前用的exports = { ... }是CommonJS的导出方式，但在Vue项目（尤其是用Vue CLI搭建的项目）里，默认使用ES模块规范，必须用export default来导出Mixin对象，这样组件才能正确导入并把方法挂载到实例上。

2. 核对组件的导入路径 #

检查my-component.vue里的导入语句：

import TransitionsMixin from '../transitions.js'

如果你的Mixin文件名是transition-mixins.js，记得把路径改成../transition-mixins.js——路径错误也会导致组件找不到Mixin里的方法，这也是容易踩的小坑。

3. 确认组件的Mixin配置 #

你组件里的mixins: [TransitionsMixin]配置是完全正确的，只要上面两步搞定，Vue会自动把Mixin里的slideEnter和slideLeave方法挂载到组件实例上，模板里的v-on:enter="slideEnter"就能正常调用了。

额外小技巧（可选） #

如果这两个滑动方法是全局多个组件都要用的，你可以把Mixin注册成全局Mixin，这样就不用每个组件都手动导入了：
在项目的main.js里添加这段代码：

import TransitionsMixin from './path/to/transition-mixins.js'
Vue.mixin(TransitionsMixin)

不过要注意，全局Mixin会作用于所有Vue组件，所以只适合这种通用且无副作用的方法哦。

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