时间戳

首页 > 解决方案 > Vue 3 事件命名约定让我感到困惑

javascript - Vue 3 事件命名约定让我感到困惑

问题描述

在我的父组件中，我有一个子组件：

<upsetting-moment-step
    :this-step-number="1"
    :current-step-number="currentStepNumber"
    @showNextStep="showNextStep"
></upsetting-moment-step>

我的父组件也有这个方法：

methods: {
    showNextStep() {
        this.currentStepNumber++;
    }
},

我从子组件中的按钮调用此事件：

<button type="button" class="btn btn-lg btn-primary" @click="showNextStep">Continue</button>

这是子组件方法：

methods: {
    showNextStep() {
        this.$emit('showNextStep');
    }
},

现在这很好用，但我很困惑，因为当我使用@show-next-step而不是@showNextStep在子组件标签中时它停止工作。

根据文档，它应该可以工作，这也是推荐的方法。但是，它根本不起作用。

有趣的是，如果我将其更改为蛇盒，如果我使用this.$emit('show-next-step');. 然而，这让我很困惑，因为我可以通过蛇盒传递我的道具，并通过骆驼盒在我的组件中使用它们。

难道我做错了什么？

标签： javascriptvue.jsvuejs3

解决方案

在您的组件upsetting-moment-step中，您正在使用一个名为 的事件 @showNextStep，@ - 表示它是一个事件。因此，要为事件运行一些操作，您需要先发出它（名称必须与组件中的名称相同。 this.$emit('showNextStep');才能发出事件。一旦发出事件，直到您的代码，函数showNextStep才会运行。

命名约定是使用 camelCase 编写 JS，使用 kebab-case 编写标签和事件。

推荐阅读