欢迎加入QQ群一起探讨交流:581902292

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>
				  </>
				)
			}
		}
	})

  

  

  

posted @ 2024-03-29 10:40  £AP︶ㄣOL◢◤LO  阅读(221)  评论(0编辑  收藏  举报