Question

所以这是我的情况：

我正在创建一个模态：

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

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>

注入html - 使用slot还是v-html？

1 个答案: