內嵌模板中的Vuejs Component插槽具有props

Question

我有以下示例代碼：這是一個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>

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>

希望這些作品之一能為您服務。