vue 子组件抛出去的 用于 slot 的数据怎么写得更优雅一点？

Question

如图这个slotProps 是子组件内部 抛出来的。它只能就地加工吗？我该以哪种姿势改造它？
我的代码调用了两次函数。其实一次就有结果了。。

Answer 1

这样呢？

<template v-slot:total="{ data }">
    <div>
        {{ void (temp = summaryMethod(data)) }}
        <div>当前页 总支出 {{ temp[0] }}</div>
        <div>总收入 {{ temp[1] }}</div>
    </div>
</template>

Answer 2

我想到了几种思路，你可以参考一下。

第一种是把计算总支出和总收入的方法分开

总支出 {{summaryPay(slotProps.data)}}   总收入  {{summaryIncome(slotProps.data)}}

第二种是循环结果

<span v-for="(item, i) in summaryMethod(slotProps.data)" :key="i">
    {{i===0?'总支出':'总收入'}}    {{item}}
</span>

第三种是总结方法写在子组件里直接抛出结果

// 子组件
<slot name="total" :data="summaryMethod(data)"></slot>

// 父组件
总支出 {{slotProps.data[0]}}   总收入{{slotProps.data[1]}}

第四种是子组件不用slot抛出了，在data有变化的时候调用父组件的summaryMethod，然后直接记录在父组件里

// 子组件
dataChange () {
    this.$emit('summaryMethod', data)
}

// 父组件
summaryMethod (data) {
    ...
    this.summary = [pay ,income]
}

Answer 3

说白了你想在 template 中定义临时变量。

我赞同用 v-for 来达到临时变量目的的方案，其他的多少有点因噎废食。

另外一个比较完美的方案就是，把这块拆分出去做另一个组件，它还是个函数式纯组件哦。

<div slot="total" slotScope="slotProps">
    <summary-text :summary="summaryMethod(slotProps.data)"></summary-text>
</div>

不要怕组件粒度小，该拆出去就拆。

---

v-for 可以这么干,等价于创建临时变量了：

<div slot="total" slotScope="slotProps">
    <template v-for="data in [summaryMethod(slotProps)]">
        <div>当前页 总支出 {{data[0]}}   总收入 {{data[1]}}</div>
    </template>
</div>