如何在 vue 中触发没有 $refs 的点击事件？

Posted 2023-02-16

【中文标题】如何在 vue 中触发没有 $refs 的点击事件？

【英文标题】：How to trigger click event without $refs in vue?

【发布时间】：2020-06-24 21:46:11

【问题描述】：

我有这样的模板：

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

嵌套跨度组件的模板是这样的：

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

段落组件在 contenteditable div 中呈现。

当我点击段落时，我想在handleParagraphClick 内触发跨度点击事件。

（当我点击段落时，我想将插入符号放入 span 并将 span 标记为当前活动节点，这可以通过调用 handleSpanClick 来完成，但这是另一个故事。）

可以使用

this.$refs.mySpan.click()

但我没有$refs 跨度。没有$refs怎么办？

更新。

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

【参考方案1】：

您有多个跨度作为动态组件。您打算在哪一个中调用 handleSpanClick 方法？ 你仍然可以在 v-for 中使用 $refs 来访问这样的组件数组：

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

代码：

const mySpan = this.$refs.spans[0] // get the first span for instance
mySpan.handleSpanClick()

【讨论】：

在这种情况下我需要知道点击的跨度索引才能在$refs.spans[]中使用它。

在你的问题中你说你点击一个段落而不是一个跨度。这意味着您在段落上触发点击事件，而不是在跨度上触发。另一方面，如果您单击将导致触发跨度本身的单击事件的跨度。请说明您希望达到的目标。

阿纳托利，你是对的。当我单击段落的空白位置时，我想将插入符号放在最后一个跨度的末尾并触发该跨度的单击事件。当我在跨度之间单击时，我想将插入符号放在右侧跨度的开头（或左侧跨度的末尾）。我错过了那部分。

最后一个跨度的第一个案例不会有问题。问题是确定点击位置周围的兄弟跨度。你可以在 span 之间添加一些元素来捕获点击并确定点击元素旁边的 span 吗？

Anatoly，还有一个问题。我已将@click 附加到组件的根元素。如果我通过与组件相关的$refs.spans[]触发点击事件会触发吗？