Vue中关于props的异步传值,父调子方法报错的原因。

问题描述

父组件给子组件绑定传入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)// 这里会报错，提示拿不到treeNode
  },

---

原因分析：

props传值为异步，但调用子组件的方法是同步，子组件在执行方法时还未拿到传入的值，因此报错。

---

解决方案：

了解原因后很好解决，在调用此方法时，我们可以不通过props传值，直接通过父组件函数传参的形式。

父组件中改成

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

子组件中

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