Vue.js过渡组件出现Maximum call stack size exceeded错误求助

你遇到的「Maximum call stack size exceeded」错误，根源是自定义组件的名称和Vue内置的<transition>组件重名了。

你的组件name属性设为了"Transition"，而Vue在解析模板里的<transition>标签时，会优先使用你自定义的这个组件，而非内置的过渡组件。这就导致组件内部的<transition>又会调用自身，形成无限递归，最终触发栈溢出错误。

解决步骤 #

• 修改组件的name属性，改成和内置组件不冲突的名称，比如"FadeTransition"：

export default {
  name: "FadeTransition", // 修改此处名称
  data() {
    return {
      show: false
    };
  },
  // 其余代码保持不变
};

另外，你的过渡样式存在小瑕疵，fade-leave阶段未设置初始透明度，会导致离开动画不流畅，可补充如下：

.fade-leave {
  opacity: 1;
}

修改完成后，组件就能正常调用Vue内置的过渡组件，递归问题会被解决，过渡效果也能正常运行。

内容的提问来源于stack exchange，提问作者Lăng Rover