Vue 访问计算的子组件属性

Question

所以我正在使用名为 'vue-tree-list' 的第三方 vue 组件，这里是 link -> https://github.com/ParadeTo/vue-tree-list

在组件中它有一个计算的属性，它基本上分析树结构以找到插入新 leaf/node 的正确位置。

在我的父组件中我这样做了：

<template>
  <div class="py-8 px-5" style="min-height: calc(100vh - (112px + 2.75rem))">
    <div class="flex flex-col w-full">
      <button class="cursor-pointer relative flex flex-row items-center h-10 focus:outline-none " 
       >
        <span class="text-sm tracking-wide truncate ml-6">Add Node</span>
      </button>
    </div>
    <VueTreeList
     @click="onClick"
     @change-name="onChangeName"
     @delete-node="onDel"
     @add-node="onClick"
     ref="tree"
     :model="data"
     default-tree-node-name="New Depot"
     default-leaf-node-name="New Driver"
     v-bind:default-expanded="false"
     >
      <template v-slot:leafNameDisplay="slotProps">
        <a class="text-orange-primary mr-4">
           <span>{{ slotProps.model.name }}</span>
        </a>
      </template>
      <span class="icon" slot="addTreeNodeIcon"></span>
      <span class="icon" @click.stop="test()" slot="addLeafNodeIcon">＋</span>
       
       ^INSTEAD OF CALLING THE DEFAULT EVENT 'add-child' WHICH IMMEDIATELY INSERTS A NODE I DIVERTED IT INSTEAD SINCE I WANT THE USER TO INPUT THEIR DATA BEFORE INSERTING INSIDE THE TREE

      <span class="icon" slot="editNodeIcon"></span>
      <span class="icon" slot="delNodeIcon">✂️</span>
      <span class="icon" slot="leafNodeIcon"></span>
      <span class="icon" slot="treeNodeIcon"></span>
    </VueTreeList>
      <Modal ref="modal" :title="modalTitle" :size="modalSize" :height="modalHeight">
        <div v-if="modalContent == 'new'">
          <DriverLookUp />
          <VehicleLookUp />
        </div>
      </Modal>
  </div>
  
</template>

<script>
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
import { DriverLookUp, VehicleLookUp  } from '@/components/forms/depot'

export default {   ONLY ADDED THE RELEVANT FUNCTIONS SINCE IT WOULD BE VERY LONG
    components: {
      VueTreeList, Modal, DriverLookUp, VehicleLookUp
    },
      test(){
         this.$refs.tree.rootNode() <--- the computed method that I want to access 
      },
}...

这个问题是计算的属性出于某种原因在缺少属性时抛出错误，这没有意义，因为它已经被渲染了。有没有办法触发子组件计算属性?

https://github.com/ParadeTo/vue-tree-list/blob/master/src/VueTreeList.vue <--- 这是我正在使用的子组件的 link

Answer 1

该组件的计算属性 walks up its parent tree until it finds a component with a prop named model, containing name of "root"。它假设所有 parents 都有这个道具，否则失败，导致你观察到的错误。

解决方法是在读取计算属性之前在组件中声明属性：

export default {
  props: {
      
    model: {
      type: Object,
      default: () => ({ name: 'root' }),
    },
  },
  methods: {
    test() {
      const rootNode = this.$refs.tree.rootNode
      console.log({ rootNode })
    },
  }
}

demo

Vue 访问计算的子组件属性

Vue accessing a child components computed property

javascript

events

dom

vue.js

vuejs2

Vue 访问计算的子组件 属性

Vue accessing a child components computed property

javascript

events

dom

vue.js

vuejs2

Vue 访问计算的子组件属性