如何在 Vue 3 中替换 this.$parent.$emit？

Posted 2023-03-22

【中文标题】如何在 Vue 3 中替换 this.$parent.$emit？

【英文标题】：How to replace this.$parent.$emit in Vue 3?

【发布时间】：2020-09-19 09:37:27

【问题描述】：

我已将我的应用程序迁移到 Vue 3。

现在我的 linter 显示一个弃用错误，记录在这里：https://eslint.vuejs.org/rules/no-deprecated-events-api.html。

该文档显示了如何将 this.$emit 替换为 mitt 库，但没有显示如何替换 this.$parent.$emit。

【问题讨论】：

您是否从 Vue 2 迁移了您的应用程序？

是的，我正在从 Vue 2 迁移

在 Vue 3 中，移除了 $on、$off 和 $once 实例方法。例如，您将不再能够使用 eventHub 实现事件发射器接口。但是，您将能够继续使用 $emit，因为它仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。

【参考方案1】：

在您的子组件中：

setup(props,  emit ) 
   ...
   emit('yourEvent', yourDataIfYouHaveAny);

你的父组件：

<your-child @yourEvent="onYourEvent" />

...

onYourEvent(yourDataIfYouHaveAny) 
  ...

【参考方案2】：

使用脚本设置语法，您可以：

<script setup>
    import  defineEmit  from 'vue'
    
    const emit = defineEmit(['close'])
    
    const handleClose = () => 
        emit('close')
    
</script>

在此处阅读更多信息：https://learnvue.co/2020/01/4-vue3-composition-api-tips-you-should-know/

【讨论】：

应该是defineEmits

【参考方案3】：

使用context 参数也有类似的做法，该参数在子组件（将发出事件的那个）内的第二个参数中传递

setup(props, context)
     context.emit('myEventName')

...然后通过在setup 方法中调用context.emit 方法来发出它。

在您的父组件中，您可以像这样使用处理程序来收听它：

<MyParentComponent @myEventName="handleMyEventName" />

当然，在MyParentComponent组件的setup方法中可以这样声明handler

//within <script> tag of MyParentComponent
setup(props)
    const handleMyEventName() => 
            ...
    
    return  handleMyEventName 

【参考方案4】：

由于composition api，它允许您使用在每个组件中继承的$attrs来满足这个需求。

我假设您正在使用 this.$parent.emit 因为您知道孩子将始终属于同一个父母。如何使用 $attrs 模拟上述行为？

假设我有一个包含行组件的表。但是我希望响应表父级中的行点击。

表定义

 <template>
  <row v-bind="$attrs" ></row>
 </template>

行定义

<template name="row" :item="row" @click=onClick(row)>
  Your Row 
</template>

export default 
    emits: 
      row_clicked: () =>
       return true
      
   , 
   onClick(rowData)
     this.$emit('row_clicked',rowData)
  

最后，一个包含您的表格定义的组件，您可以在其中处理点击。

<table
@row_clicked=clicked() 
>

</table

您的表格组件应该有效地将@row_clicked 应用于行组件，从而在行发出事件时触发。