Vue.js递归和可编辑组件

我正在vue.js中开发一个HTML builder GUI，我一直在使用递归组件的更新

在我的主文件Home.vue中有两个拖放，一个列出可用组件（标题、问题、文本…），另一个在其中添加和克隆这些组件。该拖动区域还可以拖动其内部组件（一个问题可能导致其他问题或文本等）。我使用vue可拖动库和嵌套的可拖动递归组件来实现这一点

我的问题是每个组件都是可编辑的，我根本不知道如何保存这些更改。由于我将树数据作为道具传递，因此无法在子级中更改它，并且我不确定是否将$emit传递给父级，因为该组件是递归的。。。 我能找到的所有例子都是关于带有固定数据的简单树的

实现这一目标的最佳方式是什么？Vuex是一个好主意吗（如果是的话，是否有一个我不知道从哪里开始的例子）

Home.vue

    <script>
    export default {
        name: 'Home',
        components: {
            draggable,
            nestedDraggable
        },
        data() {
            return {
                listDraggable: [
                    {
                        "name": "Title",
                        "component": "inputTitle", // Component name that will be load 
                        "id": 0,
                    },
                    {
                        "name": "Question",
                        "component": "inputQuestion",
                        "id": 1,
                    },
                    {
                        "name": "Text",
                        "component": "inputText",
                        "id": 2,
                    }
                ],
                treeList: [],
            }
        }
    }
</script>
<template>
    <v-row justify="center">
        <v-col cols="2">
            <h3>Components</h3>
            <v-card class="componentList">
                <v-card-text>
                    <draggable
                            class="dragArea list-group"
                            :list="listDraggable"
                            :group="{ name: 'components', pull: 'clone', put: false }">
                        <div class="list-group-item" v-for="element in listDraggable">
                            {{ element.name }}
                        </div>
                    </draggable>
                </v-card-text>
            </v-card>
        </v-col>
        <v-col cols="8">
            <h3>Drag & drop</h3>
            <nested-draggable class="dragArea list-group" group="components" :tree="treeList">
            </nested-draggable>
        </v-col>
    </v-row>
</template>

导出默认值{
姓名：'家'，
组成部分：{
拖拉的，
嵌套的可折叠的
},
数据（）{
返回{
ListDragable：[
{
“姓名”：“职务”，
“组件”：“inputTitle”，//将加载的组件名称
“id”：0，
},
{
“姓名”：“问题”，
“组件”：“输入问题”，
“id”：1，
},
{
“名称”：“文本”，
“组件”：“输入文本”，
“id”：2，
}
],
树人：[]，
}
}
}
组件
{{element.name}
拖放

NestedDraggable.vue

    <template>
    <div>
        <draggable class="dragArea list-group" :list="tree" group="components">
            <div class="list-group-item" v-for="el in tree" :key="el.id">
                <!-- Dynamic component depending on component property -->
                <component :is="el.component" :data="el"></component>
                <nested-draggable :tree="el.nodes"/>
            </div>
        </draggable>
    </div>
</template>

例如，组件inputTitle.vue

<script>
    export default {
        name: 'inputTitle',
        props: ['data']
    }
</script>

<template>
    <v-row dense justify="space-around">
        <v-col cols="6">
            <!-- how can I bind/save the entered title ? --> 
            <v-text-field placeholder="Enter a title">{{data.title}}</v-text-field>
        </v-col>
    </v-row>
</template>

导出默认值{
名称：'inputTitle'，
道具：[“数据”]
}
{{data.title}

当然，Vuex对于任何全局状态都是一个好主意，对于递归组件，它可以避免发射链。我会从我已经使用Vuex开始，所以我知道它是如何工作的，但在这个特定的场景中，我不知道如何实现它：存储中的treeData当然，可能是每个节点获取/更新这些节点的路径。但当我从组件列表拖动到第二个列表时，它必须更新一个列表：哪一个列表如果不是Home.vue中作为数据的直接树列表？如何获取根组件中的树？抱歉，可能不清楚，但这表明我对此有多困惑…

Vue draggable

有一个正在使用的Vuex。和。您还可以获取它们的两个显示辅助对象组件。这个例子很有效，我在每个元素中添加了一个输入（模板和存储区定义）和要保存在vuex存储区中的值，但为此，我使用了v-model：（标签随元素在道具中传递），但我认为不应该直接修改道具。这是一个好的做法吗？我现在不能给出一个全面的答案，但有两种主要的方法可以做到这一点：1）a--在这种情况下，你的

get

将返回道具。或者，2）首先将道具克隆到

数据

项中，在

v-model

中使用该项，然后从文本框中侦听

/
/
@input
事件，并从侦听器将克隆发送到存储。当然，Vuex对于任何全局状态和递归组件都是一个好主意，以避免发射链。我会从我已经使用Vuex开始，所以我知道它是如何工作的，但在这个特定的场景中，我不知道如何实现它：存储中的treeData当然，可能是每个节点获取/更新这些节点的路径。但当我从组件列表拖动到第二个列表时，它必须更新一个列表：哪一个列表如果不是Home.vue中作为数据的直接树列表？如何获取根组件中的树？抱歉，可能不清楚，但这表明我对此有多困惑…
Vue draggable
有一个正在使用的Vuex。和。您还可以获取它们的两个显示辅助对象组件。这个例子很有效，我在每个元素中添加了一个输入（模板和存储区定义）和要保存在vuex存储区中的值，但为此，我使用了v-model：（标签随元素在道具中传递），但我认为不应该直接修改道具。这是一个好的做法吗？我现在不能给出一个全面的答案，但有两种主要的方法可以做到这一点：1）a--在这种情况下，你的
get
将返回道具。或者，2）首先将道具克隆到
数据
项中，在
v型
中使用该项，然后从文本框中侦听
@change
/
@input
事件，并从侦听器将克隆发送到存储。