javascript - 注入(inject) html - 使用 slot 还是 v-html？

Question

这是我的案例:

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

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

现在我希望模态中的内容是动态的，所以我可以输入 <input>或<table>或带。我尝试过使用插槽(它有效)，但它并不是真正动态的。我想知道我是否错过了一些可以让老虎机变得更加动态的东西。

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

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

Answer 1

我认为使用插槽是一个不错的选择。随着 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>