Render content between component tags in specific div of component

January 10, 2022

I have the following vue component:

<template>
  <div class="message__overlay">
    <div class="message__overlay-content">
      <div class="message__overlay-content-top">
        <span class="message__overlay-close" @click="hideMessage"></span>
        <h2>{{ title }}</h2>
        <div v-html="content"></div>
      </div>
      <div class="message__overlay-content-bottom">
        <a :href="`tel:${phoneNumber}`" class="message__overlay-link">Call Customer Services</a>
      </div>
    </div>
  </div>
</template>

<script>
  import SiteConstants from '../../Constants/site-constants.js';
  import './styles.scss';

  export default {
    name: 'MessageOverlay',
    props: {
      title: {
        default: '',
        type: String,
      },
      phoneNumber: {
        default: '',
        type: String,
      },
    },
    methods: {
      hideMessage() {
        document.body.classList.remove(SiteConstants.Classes.MessageOpen, SiteConstants.Classes.OverlayOpenWithPhoneLink);
      },
    }
  };
</script>

Which I can use by registering and doing the following:

<message-overlay :title="'Notice!'" :phone-number="0123456789">
  <p>To place orders, an agreement needs to be in place for new projects. </p>
  <p>Please call our dedicated customer service team who will be happy to discuss and set this agreement up for future orders.</p>
</message-overlay>

How do I get the 2 paragraph tags (or any content between the message-overlay tags) in the child component to render in the div with v-html="content" of the parent component template?

>Solution :

You need to add a slot to your message-overlay component

<template>
  <div class="message__overlay">
    <div class="message__overlay-content">
      <div class="message__overlay-content-top">
        <span class="message__overlay-close" @click="hideMessage"></span>
        <h2>{{ title }}</h2>
        <div v-html="content">
          <slot></slot>
        </div>
      </div>
      <div class="message__overlay-content-bottom">
        <a :href="`tel:${phoneNumber}`" class="message__overlay-link">Call Customer Services</a>
      </div>
    </div>
  </div>
</template>

https://vuejs.org/v2/guide/components-slots.html