Vue3 Composition API：子组件如何调用父组件中的函数

要实现子组件Headline.vue点击登录按钮时调用父组件App.vue的loadLogin()函数，可通过Vue3的自定义事件通信完成，具体修改步骤如下：

1. 修改子组件Headline.vue #

在子组件中声明自定义事件，并在按钮点击时触发该事件：

<template>
  <div>
    <header>
      <h2>my-travel</h2>
      <div @click="navStatus" id="hamburger" class="hamburger-icon-container">
        <span class="hamburger-icon"></span>
      </div>
      <nav id="menue">
        <ul>
          <li @click="homeMenue"><a href="#home">Home</a></li>
          <!-- 替换原click绑定为自定义处理函数 -->
          <li @click="handleLoginClick"><a href="#Login">Login</a></li>
          <li><a href="#about">about</a></li>
        </ul>
      </nav>
    </header>
  </div>  
</template>

<script setup>
// 声明要触发的自定义事件
const emit = defineEmits(['trigger-login'])

const homeMenue = () => {
  console.log("Home")
}

const navStatus = () => {
  if (document.body.classList.contains('hamburger-active')) {
    document.body.classList.remove('hamburger-active');   
    document.getElementById("menue").classList.remove("closeMenue");
 } 
  else {
    console.log("open");
    document.getElementById("menue").classList.add("closeMenue");
    document.body.classList.add('hamburger-active');
 }
}

// 点击登录按钮时，触发自定义事件通知父组件
const handleLoginClick = () => {
  emit('trigger-login')
}
</script>

2. 修改父组件App.vue #

在父组件中监听子组件触发的自定义事件，并绑定到自身的loadLogin方法：

<template> 
  <div>
    <!-- 监听子组件的自定义事件，触发父组件的loadLogin方法 -->
    <HeadLine @trigger-login="loadLogin"/>
    <hr/>      
    <div class="content">
      <LoginUser class="login"/>
    <ContentPicture class="contentPicture"/>
    </div>
  </div>
</template>

<script setup>
import HeadLine from '@/components/HeadLine.vue'
import ContentPicture from '@/components/ContentPicture.vue'
import LoginUser from '@/components/LoginUser.vue'

const loadLogin = () => {
    console.log("Login");
    const element = document.querySelector('.login');
    element.style.display = 'flex';
}
</script>

<style>
body, hr {
  margin: 0em;
}

.content {
  position: absolute;
  top: 60px;
  margin: 1em;
  z-index: -100;
}

.login {
display: none
}
</style>

原理说明 #

Vue3中父子组件通信遵循“子组件触发事件，父组件监听事件”的模式：

• 子组件通过defineEmits声明要触发的事件，再用emit()方法触发事件；
• 父组件通过@事件名的方式监听子组件事件，绑定自身的业务方法，从而实现子组件调用父组件函数的效果。

内容的提问来源于stack exchange，提问作者coldstone