Vue.js 如何在vue中没有$refs的情况下触发单击事件？

我有这样的模板：

<p @click="handleParagraphClick"><component v-for="item in items" :is="spanComponent"/></p>

<span @click="handleSpanClick">{{content}}</span>

<p @click="handleParagraphClick"><component v-for="item in items" :is="spanComponent" refs="spans"/></p>

但是我没有关于跨度的

$refs

。没有

$refs

，我怎么做

Upd.

---

（单击段落的空白处时，我希望将插入符号放在最后一个跨距的末尾，并触发该跨距的单击事件。在跨距之间单击时，我希望将插入符号放在右跨距的开头（或左跨距的末尾）。

您有多个跨距作为动态组件。您计划在哪一种方法中使用handleSpanClick方法？ 您仍然可以在v-for中使用$refs来访问以下组件阵列：

<p @click="handleParagraphClick"><component v-for="item in items" :is="spanComponent"/></p>

<span @click="handleSpanClick">{{content}}</span>

<p @click="handleParagraphClick"><component v-for="item in items" :is="spanComponent" refs="spans"/></p>

---

我需要知道在这种情况下单击的span index才能在

$refs.span[]

中使用它。在您的问题中，您说您单击的是段落，而不是span。这意味着你在段落上触发了点击事件，而不是在跨度上。另一方面，如果单击跨度，将导致在跨度本身上触发单击事件。请澄清你希望实现的目标。阿纳托利，你是对的。当我点击段落的空白处时，我想把插入符号放在最后一个跨距的末尾，并触发该跨距的click事件。在跨距之间单击时，我希望将插入符号放在右跨距的开头（或左跨距的末尾）。我错过了那一部分。最后一个跨度的第一个病例不会是个问题。问题是确定单击位置周围的同级跨距。能否在跨度之间添加一些元素以捕捉单击并确定单击元素旁边的跨度？Anatoly，还有另一个问题。我已将

@单击

附加到组件的根元素。如果我通过与组件相关的

$refs.span[]

触发click event，它会被触发吗？