你们好,我是金金金。
场景
笔者用的
Vue3,引入了高德地图,version为2.0,场景如下:
- 在地图上根据经纬度度打点标记了一个位置,然后点击点标记弹出自定义信息窗体,右上角关闭按钮则是绑定了关闭自定义信息窗体的事件,当点击时:
- 报错:
closeInfo is not defined
排查
贴一下相关代码
- 关闭自定义信息窗体的方法
- 关闭按钮绑定的事件
可以看到关闭按钮是绑定了
closeInfo这个函数的,那为什么报错closeInfo未定义呢?细心的小伙伴肯定也发现了为什么这里不是@click而是用onclick绑定事件呢
造成error的原因
-
为什么是用
onclick而不能用@click?-
原因是这些元素是作为字符串插入到
DOM树中的,因此Vue的事件系统无法捕捉到它们并为其绑定事件处理器。在这种情况下,应该使用原生的onclick属性来添加事件监听器。Vue在编译模板时,会自动为带有v-on:click或@click的元素添加事件监听器。但是,这种机制依赖于Vue在渲染组件时能够控制和操作DOM元素。当直接在模板字符串中插入一个元素,并且这个元素需要绑定一个事件时,由于它是动态插入的,Vue可能没有机会去处理这个元素的事件绑定,所以需要使用原生的onclick事件属性来绑定事件处理函数。这种方法不需要Vue处理,可以直接在HTML字符串中使用
-
-
为什么会报错
closeInfo未定义呢?closeInfo方法是在 Vue 组件的methods中定义的,那么它默认只能在Vue组件管理的DOM元素中被调用。这也就是为什么会报错未定义的原因,如果直接在HTML字符串中使用onclick来绑定事件,那么这个方法需要被定义在全局作用域内。
解决
既然知道了函数报错未定义的原因是因为作用域相关的问题,把
closeInfo挂载到window上,点击时就可以在原型链中找到该函数,我这里在钩子函数中将其挂载到window上
测试
无报错,事件也能正常触发,和预期结果一致,自定义信息窗体被关闭
总结
重点就是涉及到一些原生知识,由于是直接在字符串里面插入的元素,所以脱离了
Vue的一些控制,细心点也是很好解决的~
- 编写有误还请大佬指正,万分感谢。