在组件的特定 div 中的组件标签之间渲染内容答案

【问题标题】：Render content between component tags in specific div of component在组件的特定 div 中的组件标签之间渲染内容
【发布时间】：2022-01-10 15:01:08
【问题描述】：

我有以下 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 标签之间的任何内容）在父组件模板的 v-html="content" 的 div 中呈现？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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

【讨论】：