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

Question

我有这样的模板：

<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怎么办？

更新。

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

Answer 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()