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

Question

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

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

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

Answer 1

在您的子组件中：

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

您的父组件：

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

...

onYourEvent(yourDataIfYouHaveAny) {
  ...
}

Answer 2

通过使用在子组件（将发出事件的那个）内的第二个参数中传递的 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 }
}

Answer 3

由于组合 api，它允许您使用每个组件中继承的 $attrs 现在可以满足此需求。

我假设您正在使用 this.$parent.emit，因为您知道 child 将始终是同一 parent 的一部分。如何使用 $attrs?

模拟上述行为

假设我有一个包含行组件的 table。但是我希望响应 table 的 parent.

中的行点击

Table定义

 <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 定义的组件，其中您有一个处理点击的方法。

<table
@row_clicked=clicked() 
>

</table

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

Answer 4

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

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

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

How to replace this.$parent.$emit in Vue 3?

javascript

migration

vue.js

linter

vuejs3