『VUE』09. 事件传参（详细图文注释）

在Vue.js中，事件传参是一个常见的需求，它允许我们在触发事件时传递额外的数据给事件处理函数。以下是关于Vue.js事件传参的详细图文注释：

获取事件对象e参数

在Vue中，你可以直接在事件处理函数中访问原生的事件对象。例如，如果你有一个按钮，并希望在点击时获取该事件对象，你可以这样做：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event); // 打印出事件对象
    }
  }
}
</script>

当你点击按钮时，handleClick方法会被调用，并且原生的事件对象会作为参数传递给它。

事件传递其他参数

除了事件对象之外，你还可以传递其他自定义参数给事件处理函数。这可以通过在模板中直接传递参数来实现：

<template>
  <button @click="handleClick('hello world')">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(message) {
      console.log(message); // 打印出"hello world"
    }
  }
}
</script>

在这个例子中，我们传递了一个字符串'hello world'给handleClick方法。

事件同时传递事件参数和其他参数

如果你需要同时传递事件对象和其他参数给事件处理函数，你可以使用特殊变量$event来代表事件对象，并与其他参数一起传递：

<template>
  <button @click="handleClick('hello world', $event)">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(message, event) {
      console.log(message); // 打印出"hello world"
      console.log(event); // 打印出事件对象
    }
  }
}
</script>

在这个例子中，我们同时传递了一个字符串和事件对象给handleClick方法。注意$event是Vue提供的一个特殊变量，用于在模板中直接访问原生事件对象。

希望这些详细图文注释能帮助你更好地理解Vue.js中的事件传参！