未捕获的类型错误：无法设置只有一个 getter 的 # 属性树答案

【问题标题】：Uncaught TypeError: Cannot set property Tree of # which has only a getter未捕获的类型错误：无法设置只有一个 getter 的 # 属性树
【发布时间】：2021-05-28 22:43:50
【问题描述】：

我正在使用带有 <script setup> 的 Vue 3，但在尝试使用组件时出现错误。

在 Vue 2 中，它是这样工作的：

<template>
    <Tree />
</template>

<script>
    import { Tree, Fold, Draggable } from 'he-tree-vue'

    export default {
        components: {
            Tree: Tree.mixPlugins([ Fold, Draggable ])
        },
     }
</script>

我想使用 Vue 3 和 <script setup> 执行此操作，但出现此错误：

Uncaught TypeError: Cannot set property Tree of # which has only a getter

<template>
    <Tree />
</template>

<script setup>
    import { Tree, Fold, Draggable } from 'he-tree-vue'

    Tree = Tree.mixPlugins([ Fold, Draggable ]) // This is causing an error
</script>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

尝试重新分配导入时似乎会出现问题。不要重新分配它，而是重命名 Tree 导入，然后导出您自己的 Tree 常量：

<template>
  <Tree :value="treeData">
    <template v-slot="{ node, path, tree }">
      <span>
        <b @click="tree.toggleFold(node, path)">
          {{node.$folded ? '+' : '-'}}
        </b>
        {{node.text}}
      </span>
    </template>
  </Tree>
</template>

<script setup>
import { Tree as HeTree, Fold, Draggable } from 'he-tree-vue'
const Tree = HeTree.mixPlugins([ Fold, Draggable ])

const treeData = [{text: 'node 1'}, {text: 'node 2', children: [{text: 'node 2-1'}]}]
</script>

demo

【讨论】：