extraneous non-props attributes (class) were passed to component but could n

当在组件中传递不相关的非属性(class)时，可能会出现一些问题。组件通常通过属性接收和处理数据，但如果传递了不相关的非属性，组件可能无法正确处理这些数据或抛出错误。

一种可能的情况是，组件可能会忽略这些不相关的非属性，并只使用传递的属性。这样可能会导致组件无法获取所需的数据，从而无法正常工作。在这种情况下，我们需要确保只将相关的属性传递给组件，以避免出现问题。

另一种情况是，组件可能会抛出错误，因为它无法识别或处理不相关的非属性。这可能会导致应用程序崩溃或组件功能无法正常运行。为了避免这种情况，我们应该检查和筛选传递给组件的属性，确保只传递相关的属性。

有两种方法可以解决这个问题。首先，我们可以在组件中进行验证，以确保只接收和处理相关的属性，并忽略其他非属性。其次，作为组件的使用者，我们应该仔细检查文档或源代码，确保只传递相关的属性。在遵循这些方法的情况下，我们可以避免因为传递不相关的非属性而导致组件出现问题。

相关问题

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`指令绑定一个点击事件处理程序。

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