Question

我有这段代码：

    <div id="blocks">
        <component v-for="block in blockList"
            :is="block.component"
            :id="block.uniqueId"
            :init-show-header="showHeaders"
            v-model="block.model"
            v-on:content-block-remove="removeBlock"
            :key="block.uniqueId">
        </component>
    </div>

        addBlock(name) {
            let block = new Object()
            block.model = new Object()
            block.uniqueId = name + '-block-' + this.blockCount
            block.component = name + '-block'
            this.blockList.push(block)
            this.blockCount = this.blockCount + 1
        },

    <div id="buttons">
        <button v-on:click="addBlock('taxonomy')" type="button" name="button" class="btn btn-primary btn-sm">Add Taxonomy</button>
        <button v-on:click="addBlock('text-input')" type="button" name="button" class="btn btn-primary btn-sm">Add Text Input</button>
        <button v-on:click="addBlock('header')" type="button" name="button" class="btn btn-primary btn-sm">Add Header</button>
        <!-- <button v-on:click="addBlock('text')" type="button" name="button" class="btn btn-primary btn-sm">Add Text</button> -->

我有不同类型的组件，这些组件具有存储在数据对象中的不同类型的选项。我计划在保存添加它们的页面并调整其设置后将这些选项保存到数据库。每个组件类型，它在页面上的顺序和组件选项都将保存在数据库中。

我的问题是，如何在刷新并从数据库中获取所有组件及其选项后再次初始化此页面？如果在父组件的mount事件的循环中添加它们，我将如何获取每个组件的选项，其中我加载保存在数据库中的所有组件并希望使用正确的选项呈现它们？

我有什么选择？

Answer 1

我建议只使用裸v-bind和属性对象。看：https://vuejs.org/v2/api/#v-bind

多数民众赞成我的意思。假设您的组件中有this.someTestParams = {param1: 'test string', param2: true, param3: false}。

所以你只需要写：<my-child-component v-bind="someTestParams" />

而不是：<my-child-component v-bind:param1="'test string'" v-bind:param2="true" v-bind:param3="false" />

如何在使用动态组件时初始化组件

1 个答案: