Vue.js 如何基于父组件点击事件正常打开子组件内的新增弹窗

• 子组件把新增弹窗的触发判断写在created钩子里，而这个钩子仅会在子组件首次初始化时执行一次，完全无法响应父组件后续动态传入的prop值变化，从机制上就不适合做跨组件的弹窗控制逻辑。
• 页面初始就弹出弹窗的直接原因，是父组件没有给isAddModal显式设置false的初始值，导致子组件首次创建时读取到的openAddModal prop为truthy值，直接触发了created里的弹窗打开逻辑。
• 现有实现存在隐性缺陷：哪怕修正了初始弹窗的问题，后续点击父组件按钮也无法正常打开弹窗——因为prop值变化时，created钩子不会重新执行，里面的判断逻辑根本不会被触发。

第一步：调整父组件配置 #

• 在组件的data中给isAddModal显式设置初始值为false，从根源上避免首次渲染时传入异常值给子组件：

data() {
  return {
    isAddModal: false,
    editable: false
  }
}

• 给子组件绑定弹窗关闭的事件回传，保证弹窗关闭后能把isAddModal重置为false，确保后续点击按钮时，prop值能产生从false到true的有效变化：

<ChildComponent 
  :open-add-modal="isAddModal" 
  @close-modal="isAddModal = false"
/>

• 保留原有按钮点击的onAddAction逻辑即可，点击时将isAddModal设为true。

第二步：替换子组件的错误判断逻辑 #

• 直接删除写在created钩子里的prop判断代码。
• 在子组件中新增对openAddModal prop的watch监听，只有当prop值发生有效变化时，才执行弹窗的打开/关闭逻辑：

watch: {
  openAddModal(newVal) {
    if (newVal === true) {
      // 触发新增弹窗的初始化逻辑
      this.showModal = true
      this.formType = 'add'
      this.editId = null
    } else {
      // 同步关闭弹窗状态
      this.showModal = false
    }
  }
}

上述watch默认不会在组件初始化时立即执行，刚好匹配“初始加载不弹窗、点击父组件按钮才触发弹窗”的需求。

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