vue3计算属性传值

在Vue 3中，计算属性的传参可以通过使用函数形式的计算属性来实现。你可以在计算属性函数中定义参数，并在使用计算属性时传入对应的参数值。

例如，在v-for中使用计算属性传参，你可以按照以下方式进行操作：

<div v-for="item in list">
  <div v-if="isShow(item)">是否显示</div>
</div>

<script>
import { computed, ref } from 'vue'

const currentId = ref(null)

const isShow = computed(() => (item) => {
  // 计算属性传递参数
  return currentId.value === item.id
})
</script>

在这个例子中，我们定义了一个currentId的ref，并使用computed创建了一个名为isShow的计算属性。isShow的计算函数接受一个参数item，并根据currentId的值与item的id进行比较来确定是否显示。

另外，在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) => {
  return item.id === '123'
})
</script>

在这个例子中，我们定义了一个名为getCurrentDayDetailed的计算属性，并在使用slot插槽时传入了scope.item作为参数。计算属性函数根据item的id是否为'123'来确定是否显示相关内容。