使用Vue方法访问DOM元素

Question

1. 我有一个容器，里面有很多元素，例如h1，p等。 这个容器有一个背景，我想创建一种通过鼠标坐标移动他的方法。我在访问此元素时遇到问题，因为e.target向我显示了容器内的元素，而不是绑定元素的容器。

2. 有什么解决方案可以在主组件和子组件之间共享所有功能？因为当我现在想要在任何地方使用此方法时，我必须将：moveHero =“ moveHero”添加到每个组件并在prop数组中获取它，所以我想在一个地方更全局地创建此方法，并将其分享给所有孩子。现在，我认为一种解决方案是创建.js文件并将其导入Vue。

Answer 1

您可以像这样$ref将<div ref="container-ref">添加到容器元素。

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

说明：

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

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

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