How to render VueJs component based child node text?

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.

Added more background, hopefully it makes more sense now. @LawrenceCherone — Peng Xiao
– Peng Xiao, Commented Oct 12, 2019 at 3:06

tony19 · Accepted Answer · 2022-07-15 04:38:21Z

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>

edited Jul 15, 2022 at 4:38

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 12, 2019 at 2:44

Jairo

9117 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peng Xiao Over a year ago

Thanks, I think you are right. However, I cannot make it work with web component as built target. I have asked that in a different question: stackoverflow.com/questions/58353854.

Collectives™ on Stack Overflow

How to render VueJs component based child node text?

1 Answer 1

A runnable example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

A runnable example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related