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

【问题标题】：How to replace this.$parent.$emit in Vue 3?如何在 Vue 3 中替换 this.$parent.$emit？
【发布时间】：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 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。

标签： javascript vue.js migration linter vuejs3

【解决方案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>

【讨论】：

应该是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 应用于行组件，从而在行发出事件时触发。

【讨论】：