组件

🌐 Components

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

🌐 In v5.0, we introduced a new package, @vueuse/components providing renderless component versions of composable functions.

安装

🌐 Install

npm i @vueuse/core @vueuse/components

用法

🌐 Usage

例如 onClickOutside，可以不用为函数使用绑定组件引用：

🌐 For example of onClickOutside, instead of binding the component ref for functions to consume:

<script setup>
import { onClickOutside } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

function close() {
  /* ... */
}

onClickOutside(el, close)
</script>

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

我们现在可以使用自动补齐绑定的无渲染组件：

🌐 We can now use the renderless component which the binding is done automatically:

<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 访问返回值：

🌐 You can access return values with v-slot:

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

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

组件样式的详细使用方法请参考各个函数的文档。

🌐 Refer to each function's documentation for the detailed usage of component style.