How to render VueJs component based child node text? - vue.js

Question

======Updated with more background=====
I am working on a tool to convert text to a sequence diagram like this:
In the current implementation, the code (on the left) is provisioned programmatically by calling store.dispatch. I would like to make it simpler for other projects to integrate. What I wanted to achieve is to create a web component: <sequence-diagram />. It can be used in this way:
// Format A
<sequence-diagram>
response = BookController.Get(id)
....
</sequence-diagram>
The above DOM element would be rendered as a sequence diagrams (as shown on the right side of the above picture.
For the component to render properly, it needs to know what the "code" is. To pass the code (response = ....) to the component, I know I can use attributes and access it via props like this:
// Format B
<sequence-diagram code="response = ..." />
However, when the code is very long the above format is not as readable (imagine multiline code) as putting the code as child node text. If I use "Format A", how can I get the code content in my web component?
======Original question=====
What I want to implement is like this:
<my-component>
some text
</my-component>
I have managed to make it work by using attributes:
<my-component code="some text" />
Using child node text is much more readable in my case, as the text can be very long.
In the template, it already has a child component. The current template is like
<div> <myChildComponent/> </div>
I don't need to keep the text in the result dom.

Answer 1

I think what you want are slots. (See https://v2.vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots).
The code of your component would look like this:
<div>
<slot></slot>
<myChildComponent/>
</div>
A runnable example
Below we have an alert-box component that displays an error message inside a <div> styled with a red background. This is how we use it:
<alert-box> This email address is already in use. </alert-box>
And it generates HTML that looks like this:
<div>
<strong>Error!</strong>
This email address is already in use.
</div>
See it in action:
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>