使用 Vue 方法访问 DOM 元素
Access to DOM element with Vue method
我有一个容器，里面有很多元素，比如 h1、p 等。
这个容器有一个背景，我想创建方法通过鼠标坐标移动他。我在访问此元素时遇到问题，因为 e.target 显示容器内的元素，而不是绑定元素的容器。
Alive 有什么解决方案可以在主要组件和 child 组件之间共享所有功能？因为当我现在想在任何地方获得此方法时，我必须将 :moveHero="moveHero" 添加到每个组件并在 prop 数组中获取它，所以我想在一个地方更全局地创建它并将其共享给所有 child秒。现在我认为一个解决方案是创建 .js 文件并将其导入 Vue。
您可以像这样将 $ref 添加到容器元素：<div ref="container-ref">。
然后在 vue 方法中访问容器元素，只需执行 this.$refs["container-ref"]。
解释：
您可以将 ref 属性添加到任何标签，甚至是子组件。它只被 vue 解析，浏览器忽略它。
如果 ref 附加到 HTML 标签，this.$refs[key] 将 return 相应的 DOM 元素。
如果 ref 附加到子组件，this.$refs[key] 将 return 相应的 vue 实例。
我有一个容器，里面有很多元素，比如 h1、p 等。 这个容器有一个背景，我想创建方法通过鼠标坐标移动他。我在访问此元素时遇到问题，因为 e.target 显示容器内的元素，而不是绑定元素的容器。
Alive 有什么解决方案可以在主要组件和 child 组件之间共享所有功能？因为当我现在想在任何地方获得此方法时，我必须将 :moveHero="moveHero" 添加到每个组件并在 prop 数组中获取它，所以我想在一个地方更全局地创建它并将其共享给所有 child秒。现在我认为一个解决方案是创建 .js 文件并将其导入 Vue。
您可以像这样将 $ref 添加到容器元素：<div ref="container-ref">。
然后在 vue 方法中访问容器元素，只需执行 this.$refs["container-ref"]。
解释：
您可以将 ref 属性添加到任何标签，甚至是子组件。它只被 vue 解析，浏览器忽略它。
如果 ref 附加到 HTML 标签，this.$refs[key] 将 return 相应的 DOM 元素。
如果 ref 附加到子组件，this.$refs[key] 将 return 相应的 vue 实例。