javascript - Vue 3 : Emit event from child to parent

Question

我最近开始使用 Vue 3 创建一个应用程序，但在尝试将事件从子级发送到父级时，我遇到了身份验证问题。这是我的代码示例:

child

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