vue中solt插槽如何实现子组件传参给父组件

这个问题我自己在实际项目中很少用到，基本上都是使用插槽获取当前组件的一些数据参数，但是遇到了就像解决办法，下面是代码：其实就是使用 具名插槽 来在父组件引用

1.创建子组件

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

2.创建父组件

<template>
  <son>
    <template v-slot:handleField="itemProps">
      <div class="repair-status">{
    
    {
    
     itemProps.id }}</div>
    </template>
  </son>
</template>
<script>
// @ is an alias to /src
import son from "../components/son.vue";
export default {
    
    
  name: "HomeView",
  data() {
    
    
    return {
    
    
      itemProps: {
    
    },
    };
  },
  components: {
    
     son },
};
</script>

原理就是通过具名插槽设置name，在父组件中进行使用，这样就可以达到子组件给父组件传递参数