解决 Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题

[Vue warn]: Extraneous non-props attributes (mode) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <TransitionGroup name="fade-transform" mode="out-in" > 
  at <Index> 
  at <AppMain> 
  at <ElCard style= Object > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

问题出在 <transition-group> 组件上尝试传递了一个名为 mode 的非 props 属性，但是该属性无法直接被 <transition-group> 组件继承，因为该组件渲染的是片段或文本根节点。这会导致 Vue 报错。

1.解决方案

1. 移除不必要的属性

简单的解决方法是移除 <transition-group> 组件上的不必要的 mode 属性。mode 属性是用于设置过渡模式的，但在 Vue 3 中，默认的过渡模式已经改变了。

移除前：

<transition-group name="fade-transform" mode="out-in"></transition-group>

移除后：

<transition-group name="fade-transform"></transition-group>

2. 使用全局配置

Vue 提供了全局配置来设置过渡的模式，可以在 Vue 的创建实例时配置，这样可以避免在每个 <transition-group> 中重复设置。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.config.globalProperties.$transitions = {
  // 设置全局过渡模式
  mode: 'out-in'
};

app.mount('#app');

然后在组件中，不再需要传递 mode 属性：

<transition-group name="fade-transform"></transition-group>

3. 使用 <transition> 组件

如果你只需要简单的过渡效果，可以考虑使用 <transition> 组件而不是 <transition-group>。

<transition name="fade-transform" mode="out-in"></transition>

2. 什么是<TransitionGroup> ？

 ​​​​​​​<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

<TransitionGroup> 拥有与 <Transition> 除了 mode 以外所有的 props，并增加了两个额外的 props：

interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
  /**
   * 如果未定义，则渲染为片段 (fragment)。
   */
  tag?: string
  /**
   * 用于自定义过渡期间被应用的 CSS class。
   * 在模板中使用 kebab-case，例如 move-class="xxx"
   */
  moveClass?: string
}

3.和 <Transition> 的区别​

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

• 默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。

• 过渡模式（mode属性）在这里不可用，因为我们不再是在互斥的元素之间进行切换。

• 列表中的每个元素都必须有一个独一无二的 key属性。

• CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

提示：当在 DOM 内模板中使用时，组件名需要写为 <transition-group>。

4. 了解 Vue 3 过渡的改变

Vue 3 中对过渡系统进行了一些改进，包括对默认过渡模式的更改。阅读 Vue 3 的官方文档来了解这些改变，以便更好地使用过渡和动画功能。

5. 查看文档和示例

确保你的代码与 Vue 3 的最新文档和示例保持一致，这有助于避免一些常见的问题并获得正确的用法示例。

在解决这个问题时，应该注意 Vue 的版本和相关文档，确保你所使用的方法与你的 Vue 版本相匹配。

6.总结

错误信息表明 <transition-group> 组件不能接受非 props 属性，特别是对于不被组件直接继承的属性。通过移除不必要的属性、全局配置、使用 <transition> 组件等方法，可以解决这个问题。同时，确保你对 Vue 3 的过渡系统有基本的了解，并保持代码与官方文档和示例保持一致。