Vue3 属性继承问题

组件代码:

...
name:"testCom",
setup(props,{ attrs }){
     return ()=>{
         ()=><>
            <div class="test" {...attrs}></div>
          </>
    }
}
...

使用组件

<test-com class="test--index"></test-com>

结果:

<div class="test--index" ></div>

预期的结果:

<div class="test test--index" ></div>

QA: 有什么解决的办法吗?

你的attrs肯定会覆盖class啊,:class="[‘test’,attrs.class]"
很久没写vue。不知道语法对不对,大概这么个意思

:class="[‘test’,attrs.class]"写在{…attrs}后面,或者把attrs解构出class,其他参数{…rest}

谢谢你的回复。
我现在的解决方案就是这样的

...
<div {...attrs} class={["test", attrs.class]} ></div>
...

因为编写 vue2.x 组件的不需要这样写, 因为 vue3禁止属性继承 所有我想问下有没有更好的编写方法。

vue3并没有 禁用 Attribute 继承 ,而是是说可以通过

inheritAttrs: false/true,

来设置是否需要(根组件)默认继承。

然后模板里面都可以直接使用 $attrs 来指定,在哪个dom继承。

v-bind="$attrs"

你的问题好像是 后面的class把前面的class设置给覆盖掉了,和是否继承没啥关系。
或者说,正是因为继承了,才会把前面的给覆盖掉了。

1 Like

这个是在组件选项上设置 inheritAttrs: false 时才会禁用 attribute 继承
目测这个 class 没有合并的真实原因就是被 {...attrs} 覆盖了。
如果组件 “不是多根的” 或者 “不需要指定元素继承” 的话,建议直接去掉这句 {...attrs}

谢谢你的回复
去掉{...attrs} 话没有效果。

return <div class="test"></div>
or
inheritAttr:false
setup(props,{ attrs }){
return <div ><div class="test" v-bind='$attrs'></div></div>
}