Slot usage in vue

Parent component: (parent component references NewsListItem)

<NewsListItem :data="item" class="item-content">
  <div slot="btns">
    <span class="iconfont iconlingdang"
        :style="{color:[ 'rgb(204, 59, 59)', 'rgb(255, 110, 22)',  'rgb(255, 155, 0)', 
       'rgb(28, 167, 255)',][item.alarmLevel]}">
    </span>
  </div>
</NewsListItem>

In the subcomponent (NewsListItem):

 <div class="slots">
    <slot name="btns"></slot>
 </div>

(Part of the code of the parent component then occupies a place in the child component)

Guess you like

Origin blog.csdn.net/weixin_43844696/article/details/110947572