provide和inject快速上手

应用案例

代码

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

父组件 provide注入数据

// 弹窗1
    <Event ></Event>
// 弹窗2
    <EventEvaluation v-if="isShowEventEvaluation"></EventEvaluation>


  const isShowEventEvaluation = false
    const 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
  }