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

Question

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

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

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

Answer 1

在您的子组件中：

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

您的父组件：

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

...

onYourEvent(yourDataIfYouHaveAny) {
  ...
}

Answer 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/

Answer 3

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

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

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

在您的父组件中，您可以使用处理程序来收听它，如下所示：

<MyParentComponent @myEventName="handleMyEventName" />

当然，在MyParentComponent组件的 setup 方法中，您可以像这样声明处理程序

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

Answer 4

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