Vue 3中引入了Composition API,它提供了一种新的方式来组织组件逻辑,并且可以使用自定义hook来重用逻辑。下面是一个简单的自定义hook示例:

javascript
import { ref } from 'vue'

export function useCounter(initialValue) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    increment,
    decrement
  }
}

在这个例子中,我们定义了一个名为useCounter的自定义hook,它接受一个初始值作为参数,并返回一个包含计数器值和增加/减少计数器值的函数的对象。

我们可以在组件中使用这个自定义hook,如下所示:

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const counter = useCounter(0)
    return {
      counter
    }
  }
}
</script>

在这个例子中,我们导入了useCounter自定义hook,并在setup函数中调用它,将返回的counter对象添加到组件的返回值中。然后,我们可以在模板中使用counter对象来显示计数器的值,并通过调用incrementdecrement函数来更新计数器的值。

自定义hook是一个非常有用的功能,可以帮助我们在组件之间共享逻辑,并且可以使我们的代码更加模块化和可重用。

Logo

前往低代码交流专区

更多推荐