Vue.js 将子项追加到$slot.default

我有一个组件，我需要在屏幕上显示一些自定义模式。我不知道该将此对话框内容放在何处，因此我做了如下操作：

<template>
    <div class="ComponentItself">
        <div v-show="false" ref="ModalContent">
            Hello!
        </div>

        <button v-on:click="showModal">Show modal</button>
    </div>
</template>

[...]

另一个组件有一个插槽，可以接收要在其中显示的HTML内容。它就是不起作用。显示模式，但插槽内容未定义或HTML内容未解析

<div class="Dialog">
    [...]
    <slot></slot>       
    [...]
</div>

[...]
[...]

当前结果类似于：

---

我需要什么：

• 我需要知道我是否走对了路。我已经了解了

  组件

  功能，但我无法确定或理解它是否能够解决我的问题
• 我能做些什么使它工作
• 一些类似的项目可能会有帮助，但我找不到任何人
• 如果可能的话，也许我可以解决我的问题。我只需将

  .appendChild（）

  直接添加到

  $slot.default

  ，但这是不可能的

  ---

  在我看来，这可能是一个严重的问题
  可能发生的情况是，您不需要手动填充

  $slot.default

  ，而是以更标准的方式使用

  对话框

  组件。由于您的问题中没有关于后者的详细信息，因此该组件可能还需要一些重构来适应这种“标准方式”
  因此，更标准的方法是直接在父级模板中使用
  组件，而不是使用必须隐藏的占位符（您引用为

  ModalContent

  ）。这样，您在
  中传递的任何HTML都将被输入到

  对话框的
  （设计为插槽的beaviour）
  
  这样，您也省去了手动实例化对话框组件的麻烦
  
  然后，您可以切换
  可见性（使用
  v-if
  或
  v-show
  ），甚至可以像您在代码中提到的那样操纵其在DOM中的位置；当
  ModalContent
  是Vue实例时，可以通过
  $el
  访问其DOM节点：
  this.$refs.ModalContent.$el
  
  您还可以通过将
  showmodel
  方法委托给
  对话框
  组件来分解该方法
  
  代码示例：
  
  
  Vue.component（'modal-dialog'{
  模板：“#模态对话框”，
  数据（）{
  返回{
  莫达尔肖恩：错，
  };
  },
  方法：{
  showModal（）{
  this.modalShown=true；
  },
  hideModal（）{
  this.modalShown=false；
  },
  },
  });
  新Vue({
  el:“#应用程序”，
  方法：{
  showModal（）{
  这是.$refs.ModalContent.showmodel（）；
  },
  },
  });
  /*
  https://sabe.io/tutorials/how-to-create-modal-popup-box
  麻省理工学院执照https://sabe.io/terms#Licensing
  */
  .莫代尔{
  位置：固定；
  左：0；
  排名：0；
  宽度：100%；
  身高：100%；
  背景色：rgba（0,0,0,0.5）；
  不透明度：0；
  可见性：隐藏；
  转换：比例（1.1）；
  过渡：可见性0s线性0.25s，不透明度0.25s 0s，变换0.25s；
  }
  .模态内容{
  位置：绝对位置；
  最高：50%；
  左：50%；
  转换：翻译（-50%，-50%）；
  背景色：白色；
  填充：1雷姆1.5雷姆；
  宽度：24rem；
  边界半径：0.5雷姆；
  }
  .关闭按钮{
  浮动：对；
  宽度：1.5雷姆；
  线高：1.5雷姆；
  文本对齐：居中；
  光标：指针；
  边界半径：0.25雷姆；
  背景颜色：浅灰色；
  }
  .关闭按钮：悬停{
  背景色：暗灰色；
  }
  .显示模态{
  不透明度：1；
  能见度：可见；
  变换：比例（1.0）；
  过渡：可见性0s线性0s，不透明度0.25s 0s，变换0.25s；
  }
  
  你好
  你好，世界
  显示模态
  &时代；
  $slots。默认值应为一个VNode，而不是一个
  ['htmlContent']
  ，请选中，但这不是一种常规方式。可能使用指令=
  v-html
  会更好。或者使用
  v-bind:is=“component\u name”
  是另一种解决方案。
  <div class="Dialog">
      [...]
      <slot></slot>       
      [...]
  </div>