xtraneous non-props attributes (keep-alive) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

这个警告信息是因为在使用 `keep-alive` 组件时，传递了一些非 props 属性给被缓存的组件，但是这些属性无法被自动继承到缓存的组件中。这通常是因为被缓存的组件只渲染了文本或片段根节点，而非一个完整的单个根节点。

要解决这个问题，可以在被缓存的组件中添加一个包裹元素，确保它只有一个根节点。例如：

<template>
  <div>
    <!-- 在这里添加一个包裹元素 -->
    <div>
      <!-- 原来的节点内容 -->
    </div>
  </div>
</template>

同时，也可以通过在 `keep-alive` 组件上添加 `include` 和 `exclude` 属性来指定需要缓存或排除缓存的组件，以避免这个警告信息的出现。例如：

<keep-alive :include="[ComponentA, ComponentB]">
  <!-- 在这里添加需要缓存的组件 -->
</keep-alive>

需要注意的是，使用 `keep-alive` 组件时要确保被缓存的组件不会因为缓存而出现意外的行为，例如监听器没有正确移除、数据没有正确清除等。

相关问题

Extraneous non-props attributes (draggable) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

该警告信息通常出现在使用 Vue.js 开发时，当您将某些非 prop 属性传递给组件时，但是组件渲染的是片段或文本根节点时会出现。这是因为 Vue.js 在 2.4.0 版本中引入了一个新特性——组件的根节点可以是一个片段或文本节点。

解决该警告信息的方法有两种：

1. 如果您传递的属性确实是组件支持的 prop 属性，那么您可以将这些属性转移到一个包含在组件中的元素上，并使用 v-bind 将其绑定到组件上。例如：

   <template>
     <div class="my-component" v-bind="$attrs">
       ...
     </div>
   </template>

2. 如果您传递的属性不是组件支持的 prop 属性，那么您可以使用 v-bind="$attrs" 来将这些属性传递给父组件，例如：

   <my-component v-bind="$attrs"></my-component>

然后在父组件中使用 v-bind="$attrs" 将这些属性传递给子组件。

需要注意的是，第二种方法可能会将一些不必要的属性传递给子组件，因此应谨慎使用。

控制台有个警告 Extraneous non-props attributes (on) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

这个警告是因为你在组件上传递了一个非props属性（`on`），但是组件渲染的根节点是一个文本节点或者片段节点，所以无法自动继承这个属性。

要解决这个警告，你可以尝试以下几种方法：

1. 确认是否真的需要将`on`属性传递给组件。如果不需要，可以忽略这个警告。
2. 如果确实需要将`on`属性传递给组件，并且希望组件能够使用这个属性，你可以将它定义为一个props属性，并在组件中接收和使用它。
3. 如果`on`属性是一个事件处理程序，你可以考虑使用Vue.js提供的事件监听机制来处理这个事件。例如，可以在组件内部使用`@click`指令绑定一个点击事件处理程序。

如果以上方法无法解决问题，请提供更多关于你的代码和警告信息的详细信息，以便我能够更好地帮助你解决问题。