VueUse 中文文档：Components 组件

在v5.0中，我们引入了一个新的包@vueuse/components，它提供了组合式函数的无渲染组件版本。

Install

$ npm i @vueuse/core@vueuse/components

Usage

比如onClickOutside，无需为要使用的函数绑定组件ref。

<script setup>
  import { ref } from 'vue'
  import { onClickOutside } from '@vueuse/core'
  const el = ref()
  function close () {
    /* ... */
  }
  onClickOutside(el, close)
</script>

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

现在，我们能使用自动绑定的无渲染组件：

<script setup>
import { OnClickOutside } from '@vueuse/components'
function close () {
  /* ... */
}
</script>

<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

Return Value

你可以使用v-slot访问返回值：

<UseMouse v-slot="{ x, y }">
  x: {{ x }}
  y: {{ y }}
</UseMouse>

<UseDark v-slot="{ isDark, toggleDark }">
  <button @click="toggleDark()">
    Is Dark: {{ isDark }}
  </button>
</UseDark>

有关组件风格的详细用法，请参阅每个函数的文档。