vue3中自定义事件使用

43 阅读1分钟

vue3和vue2说实话我感觉差别可是太大了,最喜欢用的this在vue3里面不能用了,最喜欢用的选项式api也不能用了,只能不停的引入。 长时间没怎么碰过vue3了,最近要用到,所以记录一下简单的用法。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    const decrement = () => {
      count.value--
    }
    const emit = defineEmits(['update'])

    function handleClick() {
      increment()
      setTimeout(() => {
        decrement()
        emit('update', count.value)
      }, 1000)
    }

    return {
      count,
      increment,
      decrement,
      handleClick,
      emit
    }
  }
}
</script>