當我們在父元件中想要為子元件的某一個標籤新增一些樣式

 <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>

結果如下