Extraneous non-props attributes (title) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
大概意思就是给子组件传递的属性,由于子组件呈现片段或文本根节点,无法自动继承;就是"透传 Attributes"。
对于多根节点的组件没有自动 attribute 透传行为;如果 $attrs 没有被显式绑定,将会抛出一个运行时警告。
解决方式:手动显示绑定$attrs
(1)模板
<template>
<h1>多根节点的 Attributes 继承</h1>
<div :="$attrs"></div>
</template>
(2)渲染函数
export default defineComponent({
setup(props,context){
const attrs = context.attrs
return ()=>[h('h1','多根节点的 Attributes 继承'), h('div',{...attrs},'透传 Attributes')]
}
})
(3)JSX / TSX
export default defineComponent({
setup(props,context){
// `attrs` 包含了所有非 props 的 attribute
const attrs = context.attrs
return () => {
return (
<>
<h1>多根节点的 Attributes 继承</h1>
<div {...attrs}>透传 Attributes</div>
</>
)
}
}
})