Vue中插槽返回的数据能否传递给父组件用于prop绑定？

完全可以实现，你只需要把MyGrid内部计算得到的类型标识、类名等属性通过作用域插槽透出即可，还可以进一步把类型匹配规则做成可配置Prop，彻底避免MyGrid内部耦合业务字段：

1. 调整MyGrid.vue代码 #

<template>
  <div :class="$style.root">
    <div :class="$style.gridContainer">
      <template v-for="(item, index) in items">
        <div
          :key="index"
          :class="getItemClass(item)"
          :style="{
            padding: `${columnGap}px ${rowGap}px`,
          }"
        >
          <!-- 透出所有需要父层用到的属性 -->
          <slot 
            :item="item"
            :typename="item.typename"
            :isSquareType="squareTypeMatcher(item)"
            :gridItemClass="getItemClass(item)"
          ></slot>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    columnGap: {
      type: [String, Number],
      default: 0
    },
    rowGap: {
      type: [String, Number],
      default: 0
    },
    // 可配置的类型匹配规则，彻底解耦业务逻辑
    squareTypeMatcher: {
      type: Function,
      default: (item) => item.typename === 'NewOne'
    }
  },
  methods: {
    getItemClass(item) {
      return [
        this.$style.gridItem,
        this.squareTypeMatcher(item) ? this.$style.typeSquare : ''
      ]
    }
  }
}
</script>

2. 父组件使用透出的插槽属性 #

<MyGrid
  :items="items"
  columnGap="12"
  rowGap="14"
  <!-- 业务侧可自定义匹配规则，无需修改MyGrid内部代码 -->
  :square-type-matcher="(item) => ['NewOne', 'SquareType'].includes(item.typename)"
>
  <template v-slot="slotProps">
    <!-- 直接用透出的isSquareType判断，无需重复实现判断逻辑 -->
    <Cover
      v-if="slotProps.isSquareType"
      :project="slotProps.item.data"
      <!-- 也可以把透出来的类名应用到插槽内的自定义元素上 -->
      :class="slotProps.gridItemClass"
    />
    <Cover2 v-else :project="slotProps.item.data"/>
  </template>
</MyGrid>

说明 #

• 改造后MyGrid不再耦合任何业务类型判断逻辑，作为通用网格组件可以在任意业务场景复用
• 插槽透出的属性可按需扩展，所有和单项相关的计算结果都可以透出给父层处理，不需要修改MyGrid的渲染逻辑

内容的提问来源于stack exchange，提问作者user15909643