标签：样式 标签 inheritAttrs 添加 attrs vue3 组件 class

当我们在父组件中想要为子组件的某一个标签添加一些样式

 <show-message id="lkx" class="lkx" title="HHH" content="123"></show-message>

如果不做任何设置,那么子组件被渲染出来是这样的

 

 

 

 他会在子组件的根标签上添加样式,这显然不符合我们的需求,所以我们在子组件添加该属性

inheritAttrs:false,

此时浏览器渲染结果为

 

 看不到任何的样式加载了,这时我们可以在想要添加的子组件某一标签的样式处添加:class="$attrs.class"

<template>
<div>
<h2 >{{title}}</h2>
  <h2 :class="$attrs.class">{{content}}</h2>
  <h2>{{info.msg}}</h2>
</div>
</template>

这样就可以将想要的样式添加到想要的标签上啦,渲染后的结果如下

 

 当然,如果父组件有id和class,可以使用:="$attrs"优化一下写法,v-bind = "$attrs"

<div>
<h2 >{{title}}</h2>
  <h2 :="$attrs">{{content}}</h2>
  <h2>{{info.msg}}</h2>
</div>

结果如下

 

 

 

标签：样式,标签,inheritAttrs,添加,attrs,vue3,组件,class
来源： https://www.cnblogs.com/lkx666/p/15967128.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。