项目场景：

点击编辑按钮触发弹层，弹层同时发起请求获取数据渲染弹层中的表单值。

问题描述

父组件给子组件绑定传入treeNode。子组件的getDepartDetail方法需要treeNode中的值。当父组件触发editDepts事件时，会更新treeNode并调用子组件中的getDepartDetail方法，此时子组件会报错提示拿不到treeNode的值，但在devtools调试工具中可以看到treeNode中是有值的。

父组件中

 <!-- 弹层组件 -->
    <add-dept ref="addDept" :tree-node="treeNode" :show-dialog.sync="showDialog" @submitAddDepts="getDepartments" />

    // 编辑事件
    editDepts(treeNode) {
      // 弹出弹层
      this.showDialog = true
      // 给子组件传入treeNode
      this.treeNode = treeNode
      // 调用子组件的 getDepartDetail() 方法
      this.$refs.addDept.getDepartDetail()
    }
  }

子组件中

props: {
    treeNode: {
      type: Object,
      default: null
    }
  },

methods: {
    // 根据id获取详情
    async getDepartDetail() {
      this.formData = await getDepartDetail(this.treeNode.id)//提示没拿到值
  },

原因分析：

解决方案：

了解原因后解决方法就很简单，可以绕过props传值的方法，子组件可以通过父组件传入参数的形式拿值。

父组件中改成

this.$refs.addDept.getDepartDetail(this.treeNode.id) //用传入参数的形式

子组件中接收id

//接收父组件通过参数传入的 treeNode.id
async getDepartDetail(id) {
      this.formData = await getDepartDetail(id)
},