vue中的slot用法

一、父组件：（父组件引用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>

子组件（NewsListItem）中：

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

(父组件的部分代码 然后在子组件中占位)

二、父组件中

   <NewsListItem :data="item" class="item-content">
      <template v-slot:btns>
        <i
          class="iconfont iconjia"
          style="margin-right: 8px; cursor: pointer"
          @click="addTree"
        />
      </template>
      <template v-slot:btns="{ data }">
        <i class="iconfont iconjia" @click.stop="addTree(data)"></i>
        <i
          class="iconfont iconbianjishuru-xianxing"
          @click.stop="() => editTree(data)"
        />
        <i
          class="iconfont icontree iconshanchu"
          @click.stop="() => removeTree(data)"
        />
      </template>
  </NewsListItem>

子组件中

   <span class="tree-node" slot-scope="{ node, data }">
         <span class="label">{{ node.label }}</span>
         <span v-if="setting">
           <slot name="treeBtnGroup" :data="data"></slot>
         </span>
   </span>