vue 事件获取当前组件的属性方式
更新时间：2022年03月31日 09:40:19 作者：a_靖
这篇文章主要介绍了vue 事件获取当前组件的属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue事件获取当前组件属性
for循环把当前的item传递给绑定事件：
<block v-for="(item, index) in data_list">
<div v-on:click='changeType(item)' class="ci ">
<div class="cib" formType="submit" style='padding:15rpx 0 0 0;'>
<div style='color: #1baf1b;' id="item">{{item.productName}}</div>
<div style='color: #1baf1b;' id="item">售价:{{item.productPrice/100}}元</div>
</div>
</div>
</block> changeType: function(event) {
console.log(event);
console.log(event.productId);
}打印结果。//取到的数据是数组循环渲染出来当前点击的下标对象
click事件获取当前元素属性
Vue可以传递$event对象
<body id="app">
<ul>
<li @click="say('hello!', $event)">点击当前行文本</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
say: function(msg, event) {
//获取点击对象
var el = event.currentTarget;
alert("当前对象的内容："+el.innerHTML);
}
}
})
</script>
</body>currentTarget：currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
通俗一点说，就是你的点击事件绑定在哪一个元素上，currentTarget获取到的就是哪一个元素。
Event对象的一些兼容性写法
//获得event对象兼容性写法 event || (event = window.event); //获得target兼容型写法 event.target||event.srcElement //阻止浏览器默认行为兼容性写法 event.preventDefault ? event.preventDefault() : (event.returnValue = false); //阻止冒泡写法 event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了vue子组件设计provide和inject理解及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue3.0 项目搭建和使用流程，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了Vue中的父子组件通讯以及使用sync同步父子组件数据，对vue感兴趣的同学，可以参考下2021-04-04
这篇文章主要为大家详细介绍了vue实现滑动解锁功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了Vite2+Vue3渲染Markdown文档的方法实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue-element-admin登录拦截设置白名单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
this.$emit()的作用大家应该也都知道,主要用于子组件像父组件传值,这篇文章主要给大家介绍了关于vue中this.$emit使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇在vue项目中,将juery设置为全局变量的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论