组件传递属性报出警告

Question

老师，你好。这节课中，控制台有个报错：

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 

  at <Index class="hamburger" icon="hamburger-opened" > 

  at <Index class="hamburger-container" > 

  at <Navbar> 

  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 

  at <RouterView> 

  at <App>

经观察是Hamburger组件本身，根节点有

<div class="hamburger-container" @click="toggleClick">

这里已经定义了class="hamburger-container"，而且在这个组件内部也定义了.hamburger-container的样式。

而在引用Hamburger组件的Navbar.vue组件中，又再次设置了class="hamburger-container" :

<hamburger class="hamburger-container"></hamburger>

父组件和子组件两个设置的class的是一样的。

对这两种设置样式的方法还是有点小困惑。而且控制台也会曝出警告。

Answer 1

岛森屿夏0 2022-04-29 15:51:52

<svg v-else
<!-- 添加 v-bind="$attrs"-->
     v-bind="$attrs"
     class="svg-icon"
     :class="className"
     aria-hidden="true"
>
  <use :xlink:href="iconName"/>
</svg>

代码所处文件    src/components/SvgIcon/index.vue

• 提问者 阿阳2017 #1

  非常感谢！确实从根本上解决了问题，也学习到了新的知识点，关于v-bind的用法。

Answer 2

Sunday 2022-03-30 14:38:32

你好

这个错误指的是《，在你使用组件的时候，指定了 attrs（属性），但是因为组件的 tempalte 下包含多个根元素，所以 vue 不知道这个 attrs 应该放到哪个元素下了》