Vue solt插槽子组件像父组件传值

子组件 传递一个id 到父组件

在<template>
  <div class="task-list">
    <div class="task-box" v-for="(item, index) in list" :key="index">
      <div>
          {{item.name}}
      </div>
      <div class="handleField">
        <slot name="handleField" :id="item.id"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "XXX",
          id: 1,
        },
        {
          name: "XXX",
          id: 2,
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.task-list {
  height: calc(100% - 44px);
  padding: 0.4rem 0.3rem 0 0.4rem;
  box-sizing: border-box;
  overflow-y: auto;
  .task-box {
    box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);
    border-radius: 8px;
    margin-bottom: 0.2rem;
  }
  .task-list-one {
    background: #ffffff;
    height: 24px;
    line-height: 24px;
    padding: 0.2rem;
    position: relative;
    .handleField {
      position: absolute;
      right: 0.5rem;
      top: 0.3rem;
    }
  }
}
</style>

父组件接收子组件传来得Id

<list >
        <template v-slot:handleField='itemProps' >
            <div class="repair-status">{{itemProps.id}}</div>
        </template>
      </list>