Vue 3：从子级向父级发送事件

Question

我最近开始使用 Vue 3 创建一个应用程序，但在尝试从子级向父级发出事件时，我正在努力进行身份验证。 这是我的代码示例：

孩子

<template>
  <form class="msform">
    <input @click="goToLogin" type="button" name="next" value="Login" />
  </form>
</template>

<script>
import Cookies from "js-cookie";

export default {
  emits:['event-login'],
  methods: {
    goToLogin() {
      this.$emit("event-login");
    },
  },
};
</script>

家长

<template>
  <login v-if='loggedIn' @event-login='logIn'/>
  <div class="my-page">
    <router-view/> 
  </div>
</template>

<script>
import Cookies from "js-cookie";
import Login from '../pages/Login'

export default {
  name: "MainLayout",
  components:{
    "login":Login
  },
  data() {
    return {
      loggedIn: false,
    };
  },
  methods: {
    logIn() {
      this.loggedIn = true;
    }
  }
}

我不知道为什么事件没有在父级中处理，我可以得到一些帮助吗？

Answer 1

您正在侦听login的单独实例上发出的事件。

router-view仍然只是一个组件，因此请尝试将处理程序移到那里：

<template>
  <login v-if='loggedIn' />
  <div class="my-page">
    <router-view @event-login='logIn' /> 
  </div>
</template>