Vue


事件传参

事件传参


  • 默认参数e,e.target 相当于获取DOM
<template>
  <button ref="btn" @click="clickButton">点击</button>
</template>

const btn = ref(null)
const clickButton = (e) => {
  console.log(e.target == btn.value)    // true
  console.log(e.target.innerHTML)       // 点击
}

  • 普通参数
<template>
  <div @click="clickDiv(item.name)" v-for="item in itemList">{{ item.name }}</div>
</template>

let itemList = [{ name: "Andy" }, { name: "Bruce" }, { name: "Curry" }]
const clickDiv = (item) => {
  console.log(item)
}

  • 事件中已经有自定义参数了,如何获取默认参数e呢?
<template>
  <div @click="clickDiv(item.name, $event)" v-for="item in itemList">{{ item.name }}</div>
</template>

let itemList = [{ name: "Andy" }, { name: "Bruce" }, { name: "Curry" }]
const clickDiv = (item, e) => {
  console.log(item)
  console.log(e)
}

页面列表

ITEM_HTML