Vue 3 的＜script setup＞语法糖中的e

HWL56792024-06-28 10:23

在 Vue 3 的 <script setup> 语法糖中，可以通过直接在模板的事件监听器中访问事件对象（通常命名为 e 或 event）来传递它到方法。

以下是一个简单的例子，展示了如何在 Vue 3 的 <script setup> 中获取到 mousemove 事件的事件对象 e：

<template>  
  <div @mousemove="moveData">  
    <!-- 注意这里不再在 moveData 后面加 (e)，因为 Vue 会自动传递事件对象 -->  
  </div>  
</template>  
  
<script setup>  

// moveData 函数会接收到 mousemove 事件的事件对象  
function moveData(event) {   
  console.log(event.clientX, event.clientY)  
}  

</script>  
  
<style>  
</style>

注意在 <template> 标签的 @mousemove="moveData" 中，没有在 moveData 后面加上 (e)。这是因为在 Vue 3 的 <script setup> 中，Vue 会自动将事件对象作为第一个参数传递给事件处理函数。所以，不需要在模板中显式地传递它。

在 moveData 函数内部，可以通过 event 参数来访问鼠标移动事件的所有属性和方法。

使用js设置css属性

<template>  
  <div>  
    <img :style="imgStyle" />  
  </div>  
</template>  
  
<script setup>  
import { ref} from 'vue';  
  
// 创建一个响应式的样式对象  
const imgStyle = ref({  
  transform: 'translate(100px, 50px)',
});  

</script>  
  
<style scoped>  

</style>

Vue 3 的 ＜script setup＞ 语法糖中的e

使用js设置css属性

Vue 3 的＜script setup＞语法糖中的e