网站建设需求分析调研表,网站制作书生,软件著作权登记,个人网页设计背景图片素材你们好#xff0c;我是金金金。 场景 笔者用的Vue3#xff0c;引入了高德地图#xff0c;version为2.0#xff0c;场景如下#xff1a; 在地图上根据经纬度度打点标记了一个位置#xff0c;然后点击点标记弹出自定义信息窗体#xff0c;右上角关闭按钮则是绑定了关闭自定…你们好我是金金金。 场景 笔者用的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的一些控制细心点也是很好解决的~ 编写有误还请大佬指正万分感谢。
