如何渲染基于VueJs组件的子节点文本？

Question

=======更新了更多背景=====

我正在研究a tool，将文本转换为如下的序列图：

在当前实现中，通过调用store.dispatch以编程方式提供代码（位于左侧）。我想简化其他项目的集成。我想要实现的是创建一个Web组件：<sequence-diagram />。可以通过以下方式使用：

// Format A
<sequence-diagram>
  response = BookController.Get(id)
  ....
</sequence-diagram>

以上DOM元素将呈现为序列图（如上图右侧所示。

要使组件正确呈现，它需要知道“代码”是什么。要将代码（response = ....）传递给组件，我知道我可以使用attributes并通过props来访问它，如下所示：

// Format B
<sequence-diagram code="response = ..." />

但是，当代码很长时，上述格式不如将代码用作子节点文本那样可读（想象多行代码）。如果我使用“格式A”，如何在我的Web组件中获取代码内容？

======原始问题=====

我想要实现的是这样的：

<my-component>
  some text
</my-component>

我设法通过使用属性使其工作：

<my-component code="some text" />

在我看来，使用子节点文本更具可读性，因为文本可能很长。

在模板中，它已经具有子组件。当前模板类似于

<div> <myChildComponent/> </div>

我不需要将文本保留在结果dom中。

Answer 1

我认为您想要的是插槽。 （请参见http://networkrepository.com/actor-movie.php）。

您的组件代码如下：

<div>
    <slot></slot>
    <myChildComponent/>
</div>

---

可运行的示例

下面我们有一个alert-box组件，该组件在带有红色背景的<div>内显示错误消息。这是我们的用法：

<alert-box> This email address is already in use. </alert-box>

它会生成如下所示的HTML：

<div>
    <strong>Error!</strong>
    This email address is already in use.
</div>

---

查看实际效果：

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box" style="background-color: red; color: white;">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <alert-box> This email address is already in use.  </alert-box>
  <p> I'm a normal paragraph. </p>
</div>