Vue组件中b-modal内$refs未加载的异常问题排查

核心原因 #

BootstrapVue的b-modal组件默认采用懒渲染机制：modal内部的子组件和DOM内容，只有在modal第一次被触发显示（visible状态变为true）后，才会被实际渲染到页面中，对应的子组件实例才会被创建，$refs也才会被Vue赋值。

具体场景拆解 #

1. 首次点击报错：你看到modal“可见可交互”时，可能只是modal的容器层显示了，但内部的子组件（比如patient-creation-or-detection）还处于DOM渲染/组件挂载的异步过程中，此时$refs.patientCreationOrDetection还未被赋值，自然调用clearValue()会报错。报错后，modal内部的渲染已经完成，第二次点击时子组件实例已存在，$refs就有值了。
2. 添加if判断后无触发：如果只是简单做if(this.$refs.patientCreationOrDetection)判断，第一次执行时ref还未初始化，直接跳过逻辑；而modal渲染完成后，这个方法不会自动重新执行，导致永远触发不了clearValue()。
3. modal外ref正常：像confirmAndCreatePatient这类modal外的组件，是页面初始化时就同步渲染的，组件实例提前创建完成，所以$refs始终有效。

解决建议 #

• 利用modal的shown事件：b-modal的shown事件会在modal完全显示、内部内容渲染完成后触发。可以在这个事件里标记“modal已初始化”，或者直接在事件回调中绑定需要操作内部ref的逻辑：

  <b-modal ref="modalDialog" @shown="onModalShown">
    <!-- 内部内容 -->
  </b-modal>
  

  data() {
    return {
      isModalInitialized: false
    }
  },
  methods: {
    onModalShown() {
      this.isModalInitialized = true
    },
    clearInputs() {
      if (this.isModalInitialized) {
        this.$refs.patientCreationOrDetection.clearValue()
      }
    }
  }
  

• 结合$nextTick等待渲染：如果需要在触发显示后立即调用clearInputs，可以在修改modal可见状态后，通过$nextTick等待DOM更新完成：

  openModalAndClear() {
    this.$refs.modalDialog.show()
    this.$nextTick(() => {
      this.clearInputs()
    })
  }
  

• 关闭懒渲染（不推荐）：给b-modal添加lazy="false"属性，让内部内容在组件初始化时就渲染完成，但会增加页面初始渲染的性能开销，仅适合内容较轻的modal：

  <b-modal ref="modalDialog" :lazy="false">
    <!-- 内部内容 -->
  </b-modal>
  

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