Vue 3 - 发射不是一个函数

Question

我在 Vue 3 Composition API + Vite 中使用 emit 时遇到一个奇怪的问题。

我想简单地从 child 组件发射到 parent。

child代码：

<template>
  <div class="main-stats">
    <v-container @click="logInWithSpotify" class="boton-login">
     Iniciar sesión con Spotify
    </v-container>  
  </div>
</template>

<script setup>
const emits = defineEmits(["logInIsCorrect"]);

function logInWithSpotify() {
  emits.logInIsCorrect(true);
}
</script>

child 的唯一目的是按下按钮并通过名为 logInWithSpotify()

的自定义方法调用发射到 parent

parent代码：

<template>
  <v-app>
    <v-main class="main">
      <v-template v-if="userIsLoged">
        <MainStats />
      </v-template>
      <v-template v-else>
        <Login @logInIsCorrect="setLogInIsCorrect" />
      </v-template>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, defineAsyncComponent } from "vue";
import Login from "./components/Login.vue";
const MainStats = defineAsyncComponent(() => import("./components/MainStats.vue"));

const userIsLoged = ref(false);
function setLogInIsCorrect(value) {
  console.log(value);
  userIsLoged.value = value;
}
</script>

预期的行为是，当按下 child 组件的按钮时，具有“true”参数的 emit 到达 parent 并将 userIsLogged 变量更改为该“true” ".

有趣的是，昨天代码运行完美，今天就不行了。

在控制台上，显示：

Answer 1

嘿，我正在编辑我的答案：

我觉得问题出在您的 setup

<script setup>
const emits = defineEmits(["logInIsCorrect"]);

function logInWithSpotify() {
  emits.logInIsCorrect(true);
}
</script>

阅读这篇简短的博客后： https://www.angularfix.com/2022/03/uncaught-typeerror-emit-is-not-function.html

不就这样吗:

<script setup>
const emits = defineEmits(["logInIsCorrect"]);

function logInWithSpotify(val) {
  emits(logInIsCorrect, val);
}
</script>

然后将您的 Val 传递给 LoginWithSpotify(true)

Vue 3 - 发射不是一个函数

Vue 3 - emit is not a function

javascript

vuejs3

vue-composition-api

vite