Question

我试图创建一个可重复使用的基本模态组件，并利用插槽来提供模态内容......它创建了应用程序和模态。在按钮上单击模式显示，但没有内容。如何在指定内容的插槽中显示我的内容？我使用的插槽不正确吗？

这是帮助说明我的问题的小提琴：https://jsfiddle.net/70yyx8z2/19/

// register base modal component
Vue.component('modal', {
  template: '#modal-template'
})

// register content component for modal
Vue.component('modal-content', {
  template: '#modal-content'
})

// start app
new Vue({
  el: '#app',
  data: {
    showModal: false
  }
})


<modal v-if="showModal" @close="showModal = false">
  <h3 slot="header">Header here</h3>
  <!--
    How can I use slot to render the modal content component?
  -->
  <modal-content></modal-content>
</modal>

Answer 1

JsFiddle工作示例

您无法在组件内指定插槽名称，因为在插槽更换发生之前无法安装。相反，您可以将组件分配给插槽

<!-- modal content component -->
<script type="text/x-template" id="modal-content">
  <form>
    <h2>This should show...</h2>
    <input type="text" placeholder="user name" />
  </form>
</script>

<!-- app -->
<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <h3 slot="header">Header here</h3>
    <!--
      How can I use slot to render the modal content component?
    -->
    <modal-content slot="body"></modal-content>
  </modal>
</div>

编辑：修正了@thanksd注意到的一小部分与命名相关的问题

Answer 2

从技术上讲，你需要做的就是这个。

<modal-content slot="body"></modal-content>

您可能希望从modal-container组件中删除modal-content。

这是您的fiddle已更新。

使用Vue槽在基本组件中呈现组件

2 个答案: