使用Vue方法访问DOM元素

Question

1. 我有一个容器，里面有许多元素，如h1，p等。这个容器有一个背景，我想创建方法来移动鼠标坐标。我有访问此元素的问题，因为e.target显示容器内的元素，而不是binded元素的容器。
2. 使用任何解决方案来共享主要组件和子组件之间的所有功能？因为当我想在任何地方获得此方法时，我必须添加：moveHero =“moveHero”到每个组件并在prop数组中获取它，所以我想在一个地方更全面地创建它并将其共享给所有孩子。现在我认为一个解决方案是创建.js文件并将其导入Vue。

Answer 1

您可以将$ref添加到容器元素中，如下所示：<div ref="container-ref">。

然后要在vue方法中访问容器元素，只需执行this.$refs["container-ref"]。

说明：

您可以将ref属性添加到任何标记，甚至是子组件。它仅由vue解析，浏览器忽略它。

如果ref附加到HTML标记，this.$refs[key]将返回相应的DOM元素。

如果ref附加到子组件，this.$refs[key]将返回相应的vue实例。