Vue3+Quasar中出现this.$emit is not a function错误求助

错误原因 #

你写的irAlLink是组合式API中的普通函数，这里的this并非Vue组件实例，所以调用this.$emit会报错。

修复步骤 #

1. 在组件顶部用defineEmits声明要触发的事件：

const emit = defineEmits(['linkClickeado'])

2. 修改irAlLink函数，用声明好的emit替代this.$emit：

function irAlLink(link) {
  if (linkAbierto.value.includes(link)) {
    emit('linkClickeado', link)
    router.replace('/main')
  } else {
    emit('linkClickeado', link)
    router.replace(link)
  }
}

额外注意 #

父组件中@linkClickeado="agregarLink()"的写法会直接执行函数，无法接收子组件传递的link参数，建议改成以下两种写法之一：

• @linkClickeado="agregarLink"
• @linkClickeado="(link) => agregarLink(link)"

内容的提问来源于stack exchange，提问作者sr.Xur