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

【问题标题】：Vue 3: Emit event from child to parentVue 3：从子级向父级发送事件
【发布时间】：2021-04-16 21:30:27
【问题描述】：

我最近开始使用 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;
    }
  }
}

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

【问题讨论】：

v-if='false' is hide 隐藏组件
尝试显示它，它具有相同的行为。
有什么错误吗？
如果loggedIn是false你怎么能点击按钮输入？
控制台没有错误，对于@Daniel_Knights，我在路由 /login 已经渲染了登录组件

标签： javascript vue.js vue-component

【解决方案1】：

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

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

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

【讨论】：