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

Question

我有以下示例代码：这是一个 vuejs 环境，带有一个名为 modal 的组件。我想为模态模板内的特定区域添加一个插槽，并向该插槽添加一个道具值（在此示例中 '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>

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 组件插槽

Vuejs Component slot in inline template with props

javascript

components

slot

vue.js