vue2 插槽 父组件如何只对个别字段处理 其它使用子组件的默认值?

Question

子组件

<template slot-scope="scope">
  // 父组件使用这个插槽时 有个if判断 只针对个别字段(列)处理; 其它字段（列）使用下方的默认值
  <slot name="bodyCell" :column="column" :record="scope.row">
  </slot>
  <slot>{{ scope.row[column.prop] }}</div>
</template>

父组件

<Child>
  <template slot="bodyCell" slot-scope="{column, record}">
    <template v-if="column.prop == '表格的第一列'">
       // 只对个别字段处理，不符合条件的 使用子组件的<slot>默认值
       // ...
    </template>
  </template>
</Child>

Answer 1

两种解决方案：
1.去掉默认插槽，控制权全部交给bodyCell
子组件

// 只保留bodyCell插槽
<template slot-scope="scope">
    <slot name="bodyCell" :column="column" :record="scope.row" />
</template>

父组件

<Child>
  <template slot="bodyCell" slot-scope="{column, record}">
    <template v-if="column.prop == '表格的第一列'">
       // 符合条件
    </template>
    <template v-else>
      // 默认的
    </template>
  </template>
</Child>

2.或者在子组件处理好默认值
子组件

<template>
  <div class="child">
    <slot name="bodyCell" :column="column" :record="row">
      <span>默认插槽</span>
    </slot>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {},
  data() {
    return {
      column: {
        prop: "表格的第一列"
      },
      row: {
        name: "child",
        prop: "child-component"
      }
    };
  }
};
</script>

父组件

<template>
  <div id="app">
    <Child>
      <template #bodyCell="{ column }">
        <template v-if="column.prop === '表格的第一列'">
          <span>传入的插槽</span>
        </template>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  name: "App",
  components: {
    Child,
  },
};
</script>

修改一下 column 的值
子组件

<template>
  <div class="child">
    <slot name="bodyCell" :column="column" :record="row">
      <span>默认插槽</span>
    </slot>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: {},
  data() {
    return {
      column: {
        prop: "表格的第二列"
      },
      row: {
        name: "child",
        prop: "child-component"
      }
    };
  }
};
</script>