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

Vuejs Component slot in inline template with props

本文关键字：Vuejs 组件 插槽 有道具      更新时间：2023-09-26

我有以下示例代码：这是一个vuejs环境，包含一个名为modal的组件。我想在模态模板内为特定区域添加一个槽，并向该槽添加一个prop值（在本例中为"modalId"）。但这并不冷静——什么都不做。

  <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>

我在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>

希望其中一个对你有用。

相关文章：