组件传递属性报出警告
来源：4-17 动画逻辑，左侧菜单伸缩功能实现
阿阳2017
2022-03-30
老师，你好。这节课中，控制台有个报错：
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的是一样的。
对这两种设置样式的方法还是有点小困惑。而且控制台也会曝出警告。
2回答
-
<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
212022-07-20 -
Sunday
2022-03-30
你好
这个错误指的是《，在你使用组件的时候，指定了 attrs（属性），但是因为组件的 tempalte 下包含多个根元素，所以 vue 不知道这个 attrs 应该放到哪个元素下了》
10
相似问题