Question

我正在使用最新的Laravel和最新的Vue.js构建多页应用程序。在这篇文章的结尾，您将看到我正在努力实现的目标-我已经在视觉上完成了。但是，用户需要能够编辑文本，分配的用户和每个项目的日期。我从日期开始，正如您所看到的，我也有日期选择器在工作。

我正在努力的工作是更新根目录中的数据的主要模型，以便我可以保存用户通过HTTP请求进行的更改。最初，树的数据也通过HTTP加载（下面的示例）。

我使用嵌套组件构建了以下内容，并且我已经阅读到两个绑定已针对组件上的props贬值。我知道我需要发出事件和用户事件，但是我敢肯定，如果组件嵌套，这将如何工作？

这是通过HTTP加载的数据的示例。下面是一个非常小的示例，但是可能会更大

{
    "objective":"Test",
    "user_id":null,
    "by":"08\/09\/2018",
    "colour":"#1997c6",
    "children":[
        {
            "objective":"Test",
            "user_id":11,
            "by":"08\/09\/2018",
            "colour":"#d7e3bc",
            "children":[]
        }, {
            "objective":"Test",
            "user_id":11,
            "by":null,
            "colour":"#1997c6",
            "children":[]
        }
    ]
}

以下是到目前为止我整理的内容。

Vue.component('tree-date', {
    props: ['date'],

    data () {
        return {
            id: 0
        }
    },

    mounted() {
        this.id = uniqueId();

        $('#picker-' + this.id).datetimepicker({
             format: 'DD/MM/YYYY',
             ignoreReadonly: true
        });
    },

    template: `
    <div class="date-container" :id="'picker-' + id" data-target-input="nearest" data-toggle="datetimepicker" :data-target="'#picker-' + id">
        <div class="row">
            <div class="col-2">
                <div class="icon">
                    <i class="fa fa-calendar-alt"></i>
                </div>
            </div>

            <div class="col-10">
                <input type="text" class="form-control datetimepicker-input" readonly="readonly" :data-target="'#picker-' + id" v-model="date">
            </div>
        </div>
    </div>`
});


Vue.component('tree-section', {
    props: ['data', 'teamUsers', 'first'],

    methods: {
        test () {
            this.$emit('test');
        }
    },

    template: `
        <table v-if="data.length != 0">
            <tr>
                <td :colspan="data.children !== undefined && (data.children.length * 2) > 0 ? data.children.length * 2 : 2">
                    <div class="node" :class="{'first': first == true}">
                        <div class="inner">
                            <tree-date :date="data.by"></tree-date>

                            <div class="objective">
                                {{ data.objective }}
                            </div>

                            <div class="author" v-if="data.user_id !== null">
                                {{ teamUsers[data.user_id].first_name }} {{ teamUsers[data.user_id].last_name }}
                            </div>

                            <div class="author" v-if="data.user_id === null">
                                Unassigned
                            </div>
                        </div>
                    </div>
                </td>
            </tr>

            <tr class="lines" v-if="data.children.length > 0">
                <td :colspan="data.children.length * 2"><div class="downLine"></div></td>
            </tr>

            <tr class="lines" v-if="data.children.length > 0">
                <td class="rightLine"></td>

                <td class="topLine" v-for="index in ((data.children.length * 2) - 2)" :key="index" :class="{'rightLine': index % 2 == 0, 'leftLine':  Math.abs(index % 2) == 1}"></td>

                <td class="leftLine"></td>
            </tr>

            <tr v-if="data.children.length > 0">
                <td colspan="2" v-for="child in data.children">
                    <tree-section :data="child" :team-users="teamUsers" :first="false"></tree-section>                
                </td>            
            </tr>
        </table>
    `
});

在视图中通过以下方式调用所有这些操作：

<tree-section :data="data" :team-users="teamUsers" :first="true"></tree-section>

将组件中的数据更新重新放回根目录的任何帮助都是最有用的。

Answer 1

默认情况下，vue道具（如果对象或数组）通过引用传递-这意味着，如果在子组件上更改对象，则父组件上的原始对象也会更改。来自vue api：

请注意，JavaScript中的对象和数组是通过引用传递的，因此如果prop是数组或对象，则使对象或数组本身发生突变子组件中的元素会影响父状态。

https://vuejs.org/v2/guide/components-props.html

使用Vue中的嵌套组件将数据返回到根

1 个答案: