应用案例

代码

点击弹窗1按钮，弹窗2出现

父组件 provide注入数据

// 弹窗1<Event ></Event>
// 弹窗2<EventEvaluation v-if="isShowEventEvaluation"></EventEvaluation>const isShowEventEvaluation = falseconst isShowEventEvaluation = ref(false)provide('isShowEventEvaluation', isShowEventEvaluation)

子组件 弹窗1

      <button class="type" @click="showEventEvaluation">事件评估</button>import { inject, ref } from 'vue'const isShowEventEvaluation = inject('isShowEventEvaluation')const showEventEvaluation = () => {console.log('click事件评估按钮')isShowEventEvaluation.value = true}

点击弹窗2按钮，就消失

子组件 弹窗2

// 取消按钮<img src="@/assets/ScreenMiddle/Traffic/cancelIcon.png" @click="cancelClick" class="cancelIcon" />const isShowEventEvaluation = inject('isShowEventEvaluation')const cancelClick = () => {console.log('点击了事件评估的叉叉')isShowEventEvaluation.value = false}