Vue.js中Header与AddUser组件跨组件控制模态框的通信方案问询

实现思路 #

Header和AddUser是同级兄弟组件，无法直接通信，最轻量化的方案是状态提升：将控制模态框显隐的状态放到二者的共同父组件App中维护，Header点击时通知父组件打开模态框，AddUser关闭时通知父组件关闭模态框，父组件再将最新状态同步给AddUser，符合Vue单向数据流规范。

具体修改代码 #

1. 修改Header.vue #

删除内部的showModal相关逻辑，点击按钮时向父组件触发打开事件即可：

<template>
    <header>
        <h2>{{title}}</h2>
        <p>{{description}}</p>
        <div class="text-center btn-class">
            <button @click="$emit('openModal')">Add Vehicle</button>
        </div>
    </header>
</template>

<script>
export default{
    name: 'Header',
    props: {
        title: {
            type: String,
            default: 'Title!!',
        },
        description: {
            type: String,
            default: 'Description!!',
        }
    }
}
</script>

2. 修改App.vue #

新增模态框显隐状态，绑定子组件的事件和属性：

<template>
    <div class="container">
      <Header @openModal="showAddModal = true" />
      <AddUser :showModal="showAddModal" @closeModal="showAddModal = false" />
    </div>
</template>

<script>
import Header from './components/Header'
import AddUser from './components/AddUser'

export default {
  name: 'App',
  components: {
    Header,
    AddUser,
  },
  data() {
    return {
      // 维护模态框显隐状态
      showAddModal: false
    }
  }
}
</script>

3. 修改AddUser.vue #

将内部showModal改为父组件传入的props，关闭模态框时触发事件通知父组件：

<template>
   <div>
      <transition name="fade" appear>
         <div class="modal-overlay" v-if="showModal" @click="$emit('closeModal')"></div>
      </transition>
      <transition name="slide" appear>
         <div class="modal" v-if="showModal">
            <h3>Enter your vehicle detail</h3>
            <div class="body">
                <form @submit="onSubmit">
                <div class="form-group">
                    <input type="text" v-model="name" name="name" class="form-control" placeholder="Enter your name">
                </div>
                <br><br>
                <div class="form-btn form-group text-center">
                    <Button type="submit" text="Add" color="#2BA0A3" />
                </div>
                </form>
            </div>
         </div>
      </transition>
   </div>
</template>
<script>
   import Button from './Button'
   export default {
       name: 'AddUser',
       props: {
         // 接收父组件传入的显隐状态
         showModal: Boolean
       },
       data(){
           return {
               name: ''
           }
       },
       components: {
           Button
       },
       methods: {
           onSubmit(e){ 
               e.preventDefault()
               if(!this.name){
                   alert('Please enter name.')
                   return
               }
               // 提交成功后可以触发关闭事件
               this.$emit('closeModal')
               // 后续处理表单提交逻辑
           },
       }
   }
</script>

其他可选方案 #

如果后续项目组件层级变深，多组件都需要控制该模态框，可以选择更合适的通信方案：

• Vue2项目可使用事件总线（EventBus）
• Vue3项目可引入mitt实现全局事件通知
• 中大型项目可接入Vuex/Pinia全局状态管理统一维护模态框状态

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