javascript - 带 props 的内联模板中的 Vuejs 组件槽

Question

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

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>

希望其中之一适合您。