Question

我有以下示例代码：这是一个vuejs环境，其中包含一个名为modal的组件。我想在模态模板中为特定区域添加一个插槽，并在此插槽中添加一个prop值（在此示例中＆＃39; modalId＆＃39;）。但这并没有发生 - 什么都不会发生。

  <template id="modalTemplate">
    <div class="modal fade" :id="modalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">@{{ modalHeader }}</h4>
                </div>
                <div class="modal-body">
                    <div v-show="errors !== false" class="alert alert-warning">
                        <div v-for="error in errors">
                            @{{ error }}
                        </div>
                    </div>
                    <slot></slot>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" v-on:click="this.$dispatch('handleform', mData)">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</template>

<modal v-ref:modal :active="active" error="" v-on:handleform="addMember" modal-id="modalAdd" modal-header="Mitglied hinzufügen" :m-data="newMember">
    @{{ modalId | json }}
</modal>

Answer 1

我也和Vue有过这个问题。根据文档，您已正确完成。由于模板中只有一个<slot>元素，因此模板中的内容应插入<slot>。但没有任何表现。

尝试将<slot></slot>更改为<content></content>。我已经在文档的不同部分看到了这两种方式。

否则，只需给插槽命名即可。像

这样的东西

<slot name="content"></slot>

然后

<modal v-ref:modal :active="active" error="" v-on:handleform="addMember" modal-id="modalAdd" modal-header="Mitglied hinzufügen" :m-data="newMember">
    <span slot="content">@{{ modalId | json }}</span>
</modal>

希望其中一个适合你。

带有道具的内联模板中的Vuejs Component插槽

1 个答案: