我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取

标签的写法

      <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1">
        <van-image :src="aaa"></van-image>
        <span>{{ item.title }}</span>
      </div>

上面的 @click 的函数中, 如果要传入事件参数, 必须使用 $event ,这是固写的,不能变

当我们触发了这个事件, 要在事件中得到 data-mytype的自定义属性, 有两种方法

方法一

	methods:{
		clickMenu(param1,event){
			console.log(param1);	//参数一
			let mytype = event.currentTarget.dataset.mytype;
		}
	}

方法二

	methods:{
		clickMenu(param1,event){
			console.log(param1);	//参数一
			let mytype = event.currentTarget.getAttribute("data-mytype");
		}
	}

网上有很多使用 event.srcElement 这个的已经过时了, 并且得不到想要的值, 上面两种方式就可以解决

两种方法的区别在于, 方法二更为通用一些,只要是标签上的属性, 不管是不是以“data-” 开头的都可以获取到, 而方法一, 只有在属性是以 “data-” 开头的才可以接收到

Logo

前往低代码交流专区

更多推荐