通过DOM元素访问组件

Question

组件的模板：

<template id='someComponentTemplate'>
  <div id="{{ item.id }}">
    <span>{{ item.title }}</span>
  </div>
</template>

列出东西：

<someComponent v-for="item in items" :item=item></someComponent>

按ID

获取组件的元素

var element=document.getElementById('id123');

现在我想访问处理找到的DOM元素的精确组件对象。有可能吗？

Answer 1

如果有人需要解决方案，这里是：

首先，您应该将组件的模板主体包装到额外的标签中（例如span或div），例如：

<template id='someComponentTemplate'>
  <div>
    <div id="{{ item.id }}">
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

然后以这种方式访问​​组件对象：

var element=document.getElementById('id123');
var component=element.parentElement.__vue__;

Answer 2

更好的方法是使用Vue references

在您的父页面/组件中执行以下操作：

<someComponent ref="id123" v-for="item in items" :item=item></someComponent>

然后您可以在组件方法中访问它，如下所示：

this.$refs.id123

这将返回对SomeComponent组件的引用。