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

缺乏、安全感 2024-02-05 13:12 27阅读 0赞

[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>。

## 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 的过渡系统有基本的了解，并保持代码与官方文档和示例保持一致。