vue.js - 通过 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__;