在组件的特定 div 中呈现组件标签之间的内容

Question

我有以下 vue 组件：

<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>

我可以通过注册并执行以下操作来使用：

<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>

如何让子组件中的 2 个段落标签（或 message-overlay 标签之间的任何内容）在父组件模板的 div 和 v-html="content" 中呈现？

Answer 1

您需要向消息叠加组件添加插槽

<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

在组件的特定 div 中呈现组件标签之间的内容

Render content between component tags in specific div of component

vue.js

vue-component

vuejs2