Passing html into Vue component

Question

At the moment I pass some parameters into a vue component

 <Slider
      :images= "['/img/work/slide2.png', '/img/work/slide2.png', '/img/work/slide3.png']"
      :html="['<div>hello</div>', '<div>goodbye</div>']"
    </Slider>

The slider is either an 'html' slider or one with images.

This works fine although the html I pass in is going to get a lot more complex, maybe 30 lines and this will be harder to read and manage as params.

Can I pass in an external reference and pull that into the component?

<div v-for="content in html">
    <div class="work-slide">{{ content }}</div>
</div>

As you can see the loop in the component is a very simple v-for.

Answer 1

Don't pass HTML using attributes but using Slots:

Suppose we have a component called my-component with the following template:

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

And a parent that uses the component:

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

The rendered result will be:

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

You can also use Named Slots if you want to pass more than one field containing HTML.

Answer 2

You can inject raw html into Vue components with the v-html directive.