MICUU
微资讯
声卡
创新2024全套教程
5.1声卡全套
创新声卡驱动
板载声卡调试全套教程
Sam机架安装
Sam机架
音效助手
专题
文档
技术文档汇总
站内文档
更多
软件
更新日志
关于
装机必备
Gramos模板
光年后台模板
Betube模板
美图
友情链接
站内导航
关于
搜索
退出登录
登录
1
alpineJS的 x-for循环实例
2
alpineJS的ajax请求服务器实例
3
fetch请求实例,浏览器原生得ajax请求
4
alpineJs的鼠标右键点击事件
5
alpineJs的事件传递-dispatch
6
alpineJs子父页面参数传递的实例[弹窗页面参数传递]
7
vue-editormd在数据更新后重新渲染
原创
alpineJs的事件传递-dispatch
2023-01-04
38w热度
话不多说,直接上代码。 ### 有关事件传播 (Event Propagation) 请注意,因为 事件冒泡机制 的存在,当你需要从相同层级节点上拦截已触发的事件时,需要增加 .window 修饰符: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>alpineJS</title> <script src="./js/alpine.min.js" defer></script> </head> <body> <div x-data="myFunInit()" x-init="testInit()"> <div @custom-event.window="dispatchTest($event)"></div> </div> <button x-data @click="$dispatch('custom-event', 'Hello World!')">事件传递</button> </body> <script> //定义初始化函数 myFunInit function myFunInit() { return { "quote": { "name": "chushihua" }, //定义 x-init 的初始化函数 testInit() { fetch('/22.json', { method: 'GET', headers: { 'Content-Type': 'application/json' }, }) .then(response => response.json()) .then(data => { this.quote = data.res }) }, dispatchTest(e){ console.log(e); console.log(e.detail); } } } </script> </html> ```
注:原创不易,转载请注明出处(
https://micuu.com/new/3176.html?special=3093
),本站所有资源来源于网络收集,如有侵权请联系QQ245557979进行清除。
最后修改与 2023-01-04
上一篇:
alpineJs的鼠标右键点击事件
下一篇:
最近应该是进去瓶颈期了,抖音快手都觉得不好看了!b站也没有怎么看!难道是快要戒掉段视频了!
留言反馈
请先登录
问题反馈渠道,如有软件无法下载或者其他问题可反馈。【由于某种原因,目前留言不展示】
用户需要登录后才能留言反馈
立即留言