javascript - 注入(inject)HTML-使用广告位或V-HTML？

所以这是我的情况：

我正在通过以下方式创建模式：

<Modal id="modal">
    <my-component></my-component>
</Modal>

现在，我希望模态中的内容是动态的，因此可以放入<input>或<table>或w / e。我尝试使用广告位（它可以工作），但它并不是动态的。我想知道我是否错过了一些可以让广告位更具活力的东西。

这是我的模式的设置方式：

<div
    :id="id"
    class="main"
    ref="main"
    @click="close_modal"
>
    <div ref="content" class="content" :style="{minHeight: height, minWidth: width}">
        <div ref="title" class="title" v-if="title">
            {{ title }}
            <hr/>
        </div>
        <div ref="body" class="body">
            <slot></slot>
        </div>
    </div>
</div>

最佳答案

我认为使用插槽是一个不错的选择。在2.5中引入slot-scope后，您基本上可以获得反向属性功能，您可以在子组件中设置默认值，并在父组件中访问它们。当然，它们是完全可选的，您可以自由地在插槽中放置任何您喜欢的内容。

这是一个示例组件，可让您根据需要自定义页眉，正文和页脚：

// MyModal.vue
<template>
  <my-modal>
    <slot name="header" :text="headerText"></slot>
    <slot name="body" :text="bodyText"></slot>
    <slot name="footer" :text="footerText"></slot>
  </my-modal>
</template>

<script>
  export default {
    data() {
      return {
        headerText: "This is the header",
        bodyText: "This is the body.",
        footerText: "This is the Footer."
      }
    }
  }
</script>

// SomeComponent.vue
<template>
  <div>
    <my-modal>
      <h1 slot="header" slot-scope="headerSlotScope">
        <p>{{ headerSlotScope.text }}</p>
      </h1>
      <div slot="body" slot-scope="bodySlotScope">
        <p>{{ bodySlotScope.text }}</p>
        <!-- Add a form -->
        <form>
          ...
        </form>
        <!-- or a table -->
        <table>
          ...
        </table>
        <!-- or an image -->
        <img src="..." />
      </div>
      <div slot="footer" slot-scope="footerSlotScope">
        <p>{{ footerSlotScope.text }}</p>
        <button>Cancel</button>
        <button>OK</button>
      </div>
    </my-modal>
  </div>
</template>

<script>
import MyModal from './MyModal.vue';

export default {
  components: {
    MyModal
  }
}
</script>