在使用计算属性时,尤其是有v-for和slot插槽的使用时,进行一些参数的传递。
1. 在v-for中使用计算属性传参。
<div v-for="item in list">
<div v-if='isShow(item)'>是否显示</div>
</div>
<script>
import {computed} from 'vue'
const currentId=ref(null)
const isShow=computed(()=>(item:any)=>{ //计算属性传递参数
return currentId=== item.id
})
</script>
2. 在slot插槽中计算属性传参。
<ss-vue-calendar>
<template #tbodyCell="scope">
<span v-if="getCurrentDayDetailed(scope.item)">
{{getCurrentDayDetailed(scope.item)}}
</span>
</template>
</ss-vue-calendar>
<script lang='ts'>
const getCurrentDayDetailed = computed(() => (item: any) => {
return item.id==='123'
})
</script>