- 在
Vue开发中自定义组件之后，需要往组件身上添加click之类的一些操作事件，但是加上之后会无效。 - 原因是因为没有加上
native,官网对于native的解释为:
.native - 监听组件根元素的原生事件。
- 因此正确的写法是：
// 无效写法 <custom @click="touchCustom"></custom> // 正确写法 <custom @click.native="touchCustom"></custom>
Vue 自定义组件添加点击(@click)事件
2023-08-01
661
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
Vue 自定义组件添加点击(@click)事件
目录
相关文章
|
10天前
|
缓存
JavaScript
UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
113
64
64
|
10天前
|
前端开发
JavaScript
测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
22
8
8
|
10天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
31
2
2
|
24天前
|
存储
JavaScript
开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
45
5
5
|
24天前
|
存储
JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
30
4
4
|
1月前
|
缓存
JavaScript
UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
65
4
4
|
2月前
|
JavaScript
API
|
2月前
|
JavaScript
前端开发
测试技术
|
2月前
|
JavaScript
前端开发
Java
|
2月前
|
Java
热门文章
最新文章
1
vite 如何做到让 vue 本地开发更快速？
2
VS Code书写vue项目配置 eslint+prettier 统一代码风格
3
vue3使用高德地图实现点击获取经纬度以及搜索功能
4
VueJS && ReactJS 如何？听听别人怎么说。
5
vue之webpack打包原理和用法详解
6
中文代码示例之Vuejs入门教程(一)
7
新建Vue项目
8
基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
9
自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
10
从 vue 源码看问题 —— vue 中的实例方法你学废了吗？
1
使用Vue.js构建交互式前端的技术探索
87
2
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
157
3
vue2升级到vue3的一些使用注意事项记录(四）
127
4
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
136
5
ruoyi-nbcio-plus基于vue3的flowable多租户机制
164
6
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
100
7
vue3中使用动态组件
97
8
Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
134
9
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
70
10
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
114