解决JS在controll层定义带循环的公共方法，组件中调用时取不到返回值的问题

最新推荐文章于 2023-11-16 17:02:20 发布

原创最新推荐文章于 2023-11-16 17:02:20 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

Angular

4 篇文章

订阅专栏

本文解决了一个在Vue应用中常见的问题：如何在组件调用公共方法时正确获取父节点的ID。通过调整递归方法的实现，确保了即使在组件外部调用时也能准确返回父节点ID。

问题描述：下拉列表中，点击一个子节点，获取父节点的Id。

如果将方法直接写在组件内调用，完全ok的。

如果将方法提取到外层，想公用的话，组件内调用会出现方法中已经拿到值，但是页面调用时取不到返回值；

效果如下：

公共方法：

组件调用：

解决方案：

  // 错误公共定义

  // public findParentNode(node) {
  //    if (node.origin.type === '00') {
  //     return node.key;
  //    } else {

  //     // 当循环时只是执行方法，执行到满足if条件时，返回值是else中的findParentNode方法返回值       
  //     this.findParentNode(node.parentNode);
  //    }
  //  }




   // 正确公共定义

   public findParentNode(node) {
      if (node.origin.type === '00') {
        return node.key;
      } else {
        // 当循环时也要采用 return 方式， 这样才是else中执行的findParentNode方法的返回值返回    
        return this.findParentNode(node.parentNode);
      }
    }

解决后效果：