Vue访问子组件计算属性异常问题排查——基于vue-tree-list组件

嘿，我看了你遇到的问题，先指出一个很容易犯的小错误——你把计算属性当成方法来调用啦！你在test()里写的this.$refs.tree.rootNode()是不对的，计算属性是个属性值，不是函数，直接访问this.$refs.tree.rootNode就好。

接下来咱们一步步理清楚怎么正确处理这个问题：

1. 先修正访问计算属性的方式 #

我查看了vue-tree-list的源码，rootNode是组件里的一个计算属性，本质就是返回组件绑定的model数据，核心写法是这样的：

computed: {
  rootNode() {
    return this.model
  }
}

所以你根本不需要加括号调用，直接取值就行。把你的test方法改成这样：

test(){
  const rootNode = this.$refs.tree.rootNode;
  console.log('拿到根节点啦：', rootNode);
}

2. 确保组件已经挂载完成 #

你说组件已经渲染完成，但如果是在组件还没挂载好的时候调用（比如created钩子里），$refs.tree可能还不存在。不过你是通过点击图标触发的test方法，这时候组件肯定已经挂载好了，所以这个场景下不用额外担心。要是以后在其他场景遇到类似问题，可以把逻辑放到mounted钩子，或者用$nextTick等DOM更新完成后再访问：

mounted() {
  this.$nextTick(() => {
    const root = this.$refs.tree.rootNode;
    // 这里可以安全操作根节点
  })
}

3. 结合你的业务需求：手动插入节点 #

看你的代码，你是想先让用户在模态框输入数据，再把节点插入树里，而不是用组件默认的添加事件。拿到根节点后，你可以用组件提供的TreeNode类来创建新节点，然后手动添加到指定位置，举个例子：

import { TreeNode } from 'vue-tree-list';

// 假设用户在模态框输入完成后，你拿到了节点名称等数据
addCustomNode() {
  const root = this.$refs.tree.rootNode;
  // 创建一个叶子节点（如果要创建非叶子节点，把isLeaf改成false）
  const newNode = new TreeNode({
    name: '用户输入的节点名',
    isLeaf: true
  });
  // 把新节点添加到根节点的子节点里
  root.addChildren(newNode);
}

这样就能实现你想要的“先输入再插入”的逻辑了。

最后再总结下关键点 #

• 计算属性是属性，别加括号当方法调用，直接用.rootNode访问
• 确保在组件挂载完成后操作$refs（点击触发的场景已经满足）
• 用组件提供的TreeNode类创建节点，通过addChildren方法手动插入树结构

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