vue 3 当div 失去焦点时出发事件

在Vue 3中，如果你想在`<div>`元素失去焦点时触发一个事件，你可以使用原生的HTML事件监听器。Vue 3使用了基于Proxy的响应式系统，这意味着你不需要使用`.value`来访问响应式对象的属性。你可以直接在模板中使用事件监听器，并将一个方法作为事件处理函数。

以下是一个如何实现当`<div>`失去焦点时触发事件的示例：

<template>
  <div @blur="handleBlur">
    <!-- 其他内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const focusRef = ref(false);

function handleBlur(event) {
  console.log('div失去了焦点');
  // 这里可以添加你的逻辑代码
}
</script>

在这个例子中，`@blur="handleBlur"`是一个事件监听器，当`<div>`元素失去焦点时，会自动调用`handleBlur`方法。`handleBlur`函数接收事件对象`event`作为参数，你可以使用这个参数来获取事件相关的详细信息。