Question

我试图用令人敬畏的vue.js创建一个bootstrap模态组件，但是我还没有找到一个好的方法来转换 - 也就是说，我想捆绑几个嵌套元素背景，模态窗口，关闭按钮等组成一个组件。然后，该组件需要包含放置在其中的标记。

组件

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

    // transcluded content goes here.

    </div>
  </div>
</div>

内容

<bs-modal>
  <h1>Some title lol</h1>
  <p>The content 'n stuff</h1>
</bs-modal>

Transcluded

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <h1>Some title lol</h1>
      <p>The content 'n stuff</h1>

    </div>
  </div>
</div>

Answer 1

啊，发现了。

http://vuejs.org/guide/components.html#Content_Distribution_with_Slots 您使用特殊的<slot></slot>元素来指示转录的位置。

所以，

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

    <slot></slot>

    </div>
  </div>
</div>

如何在vue.js中进行翻译？

1 个答案: