Skip to content

reactiveOmit

反应式地省略反应式对象中的字段。

¥Reactively omit fields from a reactive object.

用法

¥Usage

基本用法

¥Basic Usage

ts
import { 
reactiveOmit
} from '@vueuse/core'
const
obj
=
reactive
({
x
: 0,
y
: 0,
elementX
: 0,
elementY
: 0,
}) const
picked
=
reactiveOmit
(
obj
, 'x', 'elementX') // { y: number, elementY: number }

谓词用法

¥Predicate Usage

ts
import { 
reactiveOmit
} from '@vueuse/core'
const
obj
=
reactive
({
bar
: 'bar',
baz
: 'should be omit',
foo
: 'foo2',
qux
: true,
}) const
picked
=
reactiveOmit
(
obj
, (
value
,
key
) =>
key
=== 'baz' ||
value
=== true)
// { bar: string, foo: string }

应用场景

¥Scenarios

有选择地将属性传递给子级

¥Selectively passing props to child

vue
<script setup lang="ts">
import { 
reactiveOmit
} from '@vueuse/core'
const
props
=
defineProps
<{
value
: string
color
?: string
font
?: string
}>() const
childProps
=
reactiveOmit
(
props
, 'value')
</script> <template> <
div
>
<!-- only passes "color" and "font" props to child --> <ChildComp v-bind="
childProps
" />
</
div
>
</template>